创建时如何处理某个元素 [英] How to manipulate a certain element when it is created

问题描述

很像实验性网络组件：自定义html元素我想复制行为，但通过使用div和某些类并对它们执行操作。像我这样想创建一个具有特定类的元素。

例如：

 < div class =api-listdata-api-link =api / users / 1 / postsdata-api-template =post-item.html > 
 //列出项目
< / div> 
  

因此，javascript应该检测到'api-list'元素已经创建。 是否有如添加一个事件处理程序在主体上触发事件，如果'api-list'已添加到dom中？

为什么不直接附加到元素，你问？我的网站是单页面，我使用ajax来注入内容，因此它需要动态加载内容。 解决方案

Mutation Observer 可以用来解决你的问题。 浏览器支持Mutation Observer

您可以检查这个 plunker ，我刚刚使用你的示例 api-list创建的。

我们观察 childList 中 conatiner ，如果有变化，然后循环这些变化，并检查是否符合条件。

= document.createElement（'div'）; divApiList.classList.add（'api-list'）; divApiList.textContent ='//////// THE LIST ////////'; var container = document.getElementById（'container'）; var counter = 1; function addApiList（）{var apiList = divApiList.cloneNode（true）; apiList.textContent + = counter; container.appendChild（apiList）; counter ++;} function addNonApiList（）{var div = document.createElement（'div'）; div.textContent ='这不是api-list div'; container.appendChild（div）;} //这可以在不同的文件中//创建一个观察者instancevar observer = new MutationObserver（function（mutations）{mutations.forEach（function（mutation）{Array.prototype.forEach.call（mutation .addedNodes，function（node）{if（node.classList.contains（'api-list'））{alert（'Api-List added'）;}}）;}）;}）; //配置观察者：var config = {childList：true，subtree：true}; //传入目标节点，以及observer optionsobserver.observe（container，config）; //稍后，您可以停止观察// observer.disconnect（）;

  #container {border：1px solid red;}  

< h1>为以下容器检查突变< / h1>< div id =container> < div>这不是api-list div< / div> < div>这不是api-list div< / div>< / div>< button onclick =addApiList（）> Add api-list< / button>< button onclick =addNonApiList（） >添加NON api-list< / button>


$ b 请注意：我从未在生产中使用Mutation Observer，因此我不确定是否有任何使用它的问题。如果有任何改进，请更正答案

Much like the experimental web components: custom html elements I want to replicate the behaviour but by using divs and certain classes and performing an action on them. Like so I want to do something with a element with a specific class as soon as it created.

For example:

<div class="api-list" data-api-link="api/users/1/posts" data-api-template="post-item.html">
    // List items
</div>

So with this, javascript should detect that hey a 'api-list' element was created. Is there such thing as adding an event handler on the body to fire an event if 'api-list' has been added to the dom?

Why not just attach it to the element directly, you ask? My site is single page and I use ajax to inject the content, therefore it needs to dynamically load things.

解决方案

Mutation Observer can be used to solve your issue. Browser support for Mutation Observer

You can check this plunker, I just created using your sample api-list.

We observe any change in the childList for the conatiner, if there are changes then loop over those changes and check if the conditions are met.

var divApiList = document.createElement('div');
divApiList.classList.add('api-list');
divApiList.textContent = '////////THE LIST////////';

var container = document.getElementById('container');
var counter = 1;
function addApiList (){
  var apiList = divApiList.cloneNode(true);
  apiList.textContent += counter;
  container.appendChild(apiList);
  counter++;
}

function addNonApiList() {
  var div = document.createElement('div');
  div.textContent = 'This is not api-list div';
  container.appendChild(div);
}

// This can be in different file
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    Array.prototype.forEach.call(mutation.addedNodes, function(node){
      if(node.classList.contains('api-list')) {
        alert('Api-List added');
      }
    });
  });    
});
 
// configuration of the observer:
var config = { childList: true, subtree: true };
 
// pass in the target node, as well as the observer options
observer.observe(container, config);
 
// later, you can stop observing
// observer.disconnect();

#container {
  border: 1px solid red;
}

<h1>Mutation are checked for the container below</h1>
<div id="container">
  <div>This is not api-list div</div>
  <div>This is not api-list div</div>
</div>
<button onclick="addApiList()">Add api-list</button>
<button onclick="addNonApiList()">Add NON api-list</button>

Please Note: I have never used Mutation Observer in production, so I am not sure if there are any issues using it. Please correct the answer if there can be any improvements

这篇关于创建时如何处理某个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！