例如：
< 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
更多推荐
创建时如何处理某个元素
发布评论