Ich habe eine Liste ol in HTML, wo ich nach Benutzeraktion dynamisch neue Elemente hinzufüge.
Ist es möglich, eine Methode zu registrieren, die nach new aufgerufen wird li wurde zur Liste hinzugefügt?
Antworten:
3 für die Antwort № 1Mutationsbeobachter
Andere ähnliche Antwort: Erkennen Sie Änderungen im DOM
Das Folgende funktioniert in Chrome 18+, Firefox 14+, IE 11+, Opera 15+ und Safari 6+ und ist dokumentiert Hier.
function add() {
document.getElementById("list").innerHTML += "<li>added</li>";
}
// Where listening for new <li>s happens
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
document.getElementById("output").innerHTML += "Doing something on DOM change.n";
});
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(document.getElementById("list"), config);<pre id="output"></pre>
<ol id="list">
<li>First!</li>
<li>Second.</li>
<li>Third...</li>
<li>fourth......</li>
<li>fifth :(</li>
</ol>
<button onclick="add()">Add</button>1 für die Antwort № 2
Verwenden Sie einen bedingten Rückruf.
function addJunk(junkToAdd, callback){
$("#myList").append("<li>"+junkToAdd+"</li>");
if("function"===typeof callback) callback();
}
addJunk("junk");
addJunk("stuff");
// but this time i wanna do stuff afterwords
addJunk("things", function(){
alert("just did some stuff");
});
addJunk("items");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="myList"></ol>Alternativ können Sie nachsehen Versprechen.
function addJunk(junkToAdd){
return new Promise(function(callback){
$("#myList").append("<li>"+junkToAdd+"</li>");
callback();
});
}
addJunk("junk");
addJunk("stuff");
// but this time i wanna do stuff afterwords
addJunk("things").then(function(){
alert("just did some stuff");
});
addJunk("items");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="myList"></ol>0 für die Antwort № 3
In diesem EreignisreferenzIch habe festgestellt, dass es eine gab DOMNodeInserted-Ereignis, aber es wurde veraltet. Sieht so aus, als würden sie die Verwendung empfehlen Mutationsbeobachter jetzt - da "re Einige Beispiele hier, aber ich habe es nie versucht. Achten Sie auf die Browser-Kompatibilität auch.
Überlegen Sie zweimal, ob Sie etwas, das nicht wirklich benötigt wird, nicht überdenken, sondern einfach eine Funktion aufrufen können, wann immer Sie möchten.