So manipulieren Sie ein bestimmtes Element, wenn es erstellt wird

Question

Ähnlich wie das experimentelle web components: custom html elements Ich möchte das Verhalten replizieren, aber indem Sie divs und bestimmte Klassen verwenden und eine Aktion für sie ausführen. Also möchte ich etwas mit einem Element mit einer bestimmten Klasse machen, sobald es erstellt wurde.

Zum Beispiel:

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

Also mit diesem, sollten Sie Javascript erkennen, dass hey a 'api-Liste' Element erstellt wurde. Gibt es so etwas wie das Hinzufügen eines Event-Handlers zum Body, um ein Event auszulösen, wenn 'api-list' zum dom hinzugefügt wurde?

Warum nicht einfach an das Element direkt anhängen, fragen Sie? Meine Seite ist eine einzelne Seite und ich benutze Ajax, um den Inhalt zu injizieren, deshalb muss er dynamisch Dinge laden.

Answer 1

Mutation Observer kann verwendet werden, um Ihr Problem zu lösen. Browser support for Mutation Observer

Sie können dies überprüfen , ich habe gerade mit Ihrem Beispiel api-list erstellt.

Wir beobachten jede Änderung in der childList für die conatiner, wenn es Änderungen dann Schleife über diese Änderungen und überprüfen Sie, ob die Bedingungen erfüllt sind.

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>

Bitte beachten Sie: Ich habe Mutation Observer nie in der Produktion, so dass ich bin nicht sicher, ob es irgendwelche Probleme gibt es zu benutzen. Bitte korrigieren Sie die Antwort, wenn es Verbesserungen geben kann