Prüfen ob ein UL-Element geändert wurde

EuroCent

EuroCent

Klappstuhl 2.0
Hallo zusammen,

habe folgendes Problem.
Ich habe ein UL Element, welches durch einen Button ein LI-Element in das UL-Element hinzugefügt wird.

Wie kann Ich nun prüfen, ob das UL element entsprechend geändert wurde?
Muss Ich ggf. prüfen ob sich die Anzahl der Elemente geändert hat, oder geht dies noch einfacher?

Ich hatte erst an diesen gedacht:
Javascript: 
$('[data-list="modul_list"]').on('change', $(this).length, function(e) {
    //TODO: Freigabe Button
});

Dies wird aber sichlich nicht funktionieren. :)

Wie kann Ich also entsprechend Prüfen ob ein Element in UL hinzugefügt wurde?
 
Lösung
basti1012
Sempervivum hat gesagt.:
Warum willst Du das denn überhaupt machen? Mir ist noch nie solch eine Anforderung untergekommen. Warum kannst Du nicht einfach die betr. Aktion dort hinzu fügen, wo das li-Element eingefügt wird?
Zum Vergrößern anklicken....

Das wäre sicherlich das einfachste
EuroCent hat gesagt.:
Mit Change auf einem UL element kann Ich dass ja leider nicht prüfen, wie bei einem Input feld :(
Schade eigentlich :D
Zum Vergrößern anklicken....
nee mit Change nicht , aber mit
DOMSubtreeModified

Link zur Lösung



Edit
contentchanged soll es wohl auch noch geben , aber habe ich noch nicht getestet
Okay... :)

Ich werd mir das nochmal genauer anschauen.

Mit Change auf einem UL element kann Ich dass ja leider nicht prüfen, wie bei einem Input feld :(
Schade eigentlich :D
 
Warum willst Du das denn überhaupt machen? Mir ist noch nie solch eine Anforderung untergekommen. Warum kannst Du nicht einfach die betr. Aktion dort hinzu fügen, wo das li-Element eingefügt wird?
 
Sempervivum hat gesagt.:
Warum willst Du das denn überhaupt machen? Mir ist noch nie solch eine Anforderung untergekommen. Warum kannst Du nicht einfach die betr. Aktion dort hinzu fügen, wo das li-Element eingefügt wird?
Zum Vergrößern anklicken....

Das wäre sicherlich das einfachste
EuroCent hat gesagt.:
Mit Change auf einem UL element kann Ich dass ja leider nicht prüfen, wie bei einem Input feld :(
Schade eigentlich :D
Zum Vergrößern anklicken....
nee mit Change nicht , aber mit
DOMSubtreeModified

Link zur Lösung



Edit
contentchanged soll es wohl auch noch geben , aber habe ich noch nicht getestet
 
Zuletzt bearbeitet:
Lösung
Hi,

ebenfalls eine schöne und performante Möglichkeit, den DOM zu beobachten, ist der MutationObserver.

Beispiel:

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Quaese">
<title>Mutation Observer</title>
<script>
var observer;

window.addEventListener("load", function() {
    var list = document.getElementById("ulId"),
        button = document.getElementById("addLi");

    button.addEventListener("click", function() {
        var item = document.createElement("li");

        item.innerHTML = "next";
        list.appendChild(item);
    });

    // create observer instance
    observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        console.log(mutation.type);
      });
    });

    // configure observer: report changes on child elements
    var config = {
        childList: true
    };

    // start observation
    observer.observe(list, config);
});

window.addEventListener("unload", function() {
    // stop observation
    observer.disconnect();
});
</script>
</head>
<body>
    <button id="addLi">add list item</button>
    <ul id="ulId">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück