2 Stimmen

Wie man die Erstellung von DOM-Elementen abfängt und sie mit jQuery manipuliert

Ich versuche, eine Methode zu entwickeln, die beim Hinzufügen eines einfachen div-Elements mit einer Klasse und einigen data-* darin, es ersetzt oder in es einige andere Elemente hinzufügt. Diese Methode sollte nicht manuell aufgerufen werden, sondern automatisch durch eine Art von .live() jQuery-Methode, ein benutzerdefiniertes Ereignis oder eine Art wie $('body').bind('create.custom'), etc. Ich brauche es auf diese Weise, da ich nicht im Voraus wissen würde, welche Elemente erstellt werden, da sie durch Ajax wie einzelne leere div's oder p's serviert werden.

<!DOCTYPE html>
<html>
    <head>

        <title >on create</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>

        <script type="text/javascript" >

            jQuery(function($){
                $("div.fancyInput").each(function(index,element){

                    var $div = $(this);
                    var dataId = $div.attr("data-input-id");
                    var inputId = '';
                    var labelId = '';
                    if(!!dataId){
                        inputId = 'id="' + dataId + '"';
                        labelId = 'id="' + dataId + 'Label"';
                    } // if

                    var dataValue = $div.attr();

                    $(
                        '<p class="fancyInput" >' +
                        '    <label ' + labelId + ' for="' + inputId + '" >A fancy input</label>' +
                        '    <input ' + inputId + ' name="' + inputId + '" value="A fancy input" />' +
                        '</p>'
                    ).appendTo($div);               
                }); // .each()
            }); // jQuery()
        </script>

        <script type="text/javascript" >

            jQuery(function($){
                var counter = 2;
                var $form = $('#form');
                $('#add').click(function(event){
                    $('<div class="fancyInput" data-input-id="fancyInput' + counter + '" ></div>').appendTo($form);
                    counter++;
                }); // .click
            }); // jQuery()

        </script>
    </head>
    <body>

        <a id="add" href="#" > add another one </a>
        <form id="form" action="#" >

            <p class="normalInput" >
                <label id="normalInputLabel" for="normalInput" >A normal input</label>
                <input id="normalInput" name="normalInput" value="A normal input" />
            </p>

            <div class="fancyInput" ></div>

        </form>
    </body>
</html>

Aktualisierung: Ich habe liveQuery vorher überprüft, es ist diese Art von Funktionalität, die ich brauche, aber mit der Fähigkeit, DOM-Elemente zu ändern, während der Ereignis-Callback ausgeführt wird. Es ist also nicht nur, dass ich Ereignisse angehängt, aber die Fähigkeit, das DOM bei der Erstellung von Elementen ändern müssen. Zum Beispiel: Wann immer ein neues Element erstellt wird, sollte es mit den Tags p, label und input ausgefüllt werden (noch besser, wenn es ersetzt wird)

4voto

jAndy Punkte 223172

Sie könnten ein DOM Level 3-Ereignis verwenden, wie DOMNodeInserted . Dies könnte wie folgt aussehen:

$(document).bind('DOMNodeInserted', function(event) {
    // A new node was inserted into the DOM
    // event.target is a reference to the newly inserted node
});

Als Alternative können Sie die .liveQuery Hilfe jQuery-Plugin.

Update

In Bezug auf Ihren Kommentar, schauen Sie bitte unter http://www.quirksmode.org/dom/events/index.html Die einzigen Browser, die das nicht unterstützen, sind die Internet Explorer dieser Welt (ich glaube, IE9 tut es zumindest).

Ich kann nicht viel über die Leistung sagen, aber sie sollte recht gut sein.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X