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


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

EuroCent

Erfahrenes Mitglied
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?
 

EuroCent

Erfahrenes Mitglied
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
 

Sempervivum

Erfahrenes Mitglied
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?
 

basti1012

Erfahrenes Mitglied
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?
Das wäre sicherlich das einfachste
Mit Change auf einem UL element kann Ich dass ja leider nicht prüfen, wie bei einem Input feld :(
Schade eigentlich :D
nee mit Change nicht , aber mit
DOMSubtreeModified


Edit
contentchanged soll es wohl auch noch geben , aber habe ich noch nicht getestet
 

Quaese

Moderator
Moderator
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
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…