jQuery, wie man das onclick-Ereignis an ein dynamisch hinzugefügtes HTML-Element bindet [duplicate]

Question 1

Ich möchte ein Onclick-Ereignis an ein Element binden, das ich dynamisch mit jQuery einfüge

Aber es führt nie die gebundene Funktion aus. Ich würde mich freuen, wenn Sie darauf hinweisen können, warum dieses Beispiel nicht funktioniert und wie ich es zum Laufen bringen kann:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
        <head>
          <title>test of click binding</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">


        jQuery(function(){
          close_link = $('<a class="" href="#">Click here to see an alert</a>');
          close_link.bind("click", function(){
            alert('hello from binded function call');
            //do stuff here...
          });
  
          $('.add_to_this').append(close_link);
        });
          </script>
        </head>
        <body>
          <h1 >Test of click binding</h1>
          <p>problem: to bind a click event to an element I append via JQuery.</p>

          <div class="add_to_this">
            <p>The link is created, then added here below:</p>
          </div>

          <div class="add_to_this">
            <p>Another is added here below:</p>
          </div>


        </body>
        </html>

BEARBEITEN: Ich habe das Beispiel so bearbeitet, dass es zwei Elemente enthält, in die die Methode eingefügt wird. In diesem Fall ist die alert() Aufruf wird nie ausgeführt. (Danke an @Daff für den Hinweis in einem Kommentar)

Question 2

Alle diese Methoden sind veraltet. Sie sollten die verwenden on Methode zur Lösung Ihres Problems.

Wenn Sie auf ein dynamisch hinzugefügtes Element abzielen möchten, müssen Sie verwenden

$(document).on('click', selector-to-your-element , function() {
     //code here ....
});

Dies ersetzt die veralteten .live() Methode.

Question 3

Das erste Problem besteht darin, dass beim Aufrufen von append für einen jQuery-Satz mit mehr als einem Element für jedes Element ein Klon des anzuhängenden Elements erstellt wird und somit der angehängte Ereignisbeobachter verloren geht.

Eine alternative Möglichkeit wäre, den Link für jedes Element zu erstellen:

function handler() { alert('hello'); }
$('.add_to_this').append(function() {
  return $('<a>Click here</a>').click(handler);
})

Ein weiteres potenzielles Problem könnte darin bestehen, dass der Ereignisbeobachter angehängt wird, bevor das Element zum DOM hinzugefügt wurde. Ich bin mir nicht sicher, ob dies etwas zu sagen hat, aber ich denke, das Verhalten könnte als unbestimmt angesehen werden. Ein soliderer Ansatz wäre wahrscheinlich:

function handler() { alert('hello'); }
$('.add_to_this').each(function() {
  var link = $('<a>Click here</a>');
  $(this).append(link);
  link.click(handler);
});

Question 4

Wie wäre es mit der Live-Methode?

$('.add_to_this a').live('click', function() {
    alert('hello from binded function call');
});

Trotzdem sieht es so aus, als ob das, was Sie getan haben, funktionieren sollte. Es gibt einen anderen Beitrag, der ziemlich ähnlich aussieht.

Question 5

Etwas spät zur Party, aber ich dachte, ich würde versuchen, einige häufige Missverständnisse in jQuery-Event-Handlern aufzuklären. Ab jQuery 1.7, .on() sollte anstelle des veralteten verwendet werden .live()um Ereignishandler an Elemente zu delegieren, die zu einem beliebigen Zeitpunkt nach der Zuweisung des Ereignishandlers dynamisch erstellt werden.

Das heißt, es ist kein einfacher Wechsel live zum on weil die Syntax etwas anders ist:

Neue Methode (Beispiel 1):

$(document).on('click', '#someting', function(){

});

Veraltete Methode (Beispiel 2):

$('#something').live(function(){

});

Wie oben gezeigt, gibt es einen Unterschied. Die Wendung ist .on() kann eigentlich ähnlich genannt werden .live()indem Sie den Selektor an die jQuery-Funktion selbst übergeben:

Beispiel 3:

$('#something').on('click', function(){

});

Allerdings ohne Verwendung $(document) Wie in Beispiel 1 funktioniert Beispiel 3 nicht für dynamisch erstellte Elemente. Das Beispiel 3 ist absolut in Ordnung, wenn Sie die dynamische Delegation nicht benötigen.

Sollte $(document).on() für alles verwendet werden?

Es wird funktionieren, aber wenn Sie die dynamische Delegierung nicht benötigen, wäre es angemessener, Beispiel 3 zu verwenden, da Beispiel 1 etwas mehr Arbeit vom Browser erfordert. Es wird keine wirklichen Auswirkungen auf die Leistung geben, aber es ist sinnvoll, die für Ihre Verwendung am besten geeignete Methode zu verwenden.

Sollte .on() anstelle von .click() verwendet werden, wenn keine dynamische Delegation benötigt wird?

Nicht unbedingt. Das Folgende ist nur eine Abkürzung für Beispiel 3:

$('#something').click(function(){

});

Das Obige ist vollkommen gültig und daher ist es wirklich eine Frage der persönlichen Präferenz, welche Methode verwendet wird, wenn keine dynamische Delegation erforderlich ist.

Verweise:

jQuery-Dokumentation für .live()

Question 6

Bedenken Sie:

jQuery(function(){
  var close_link = $('<a class="" href="#">Click here to see an alert</a>');
      $('.add_to_this').append(close_link);
      $('.add_to_this').children().each(function()
      {
        $(this).click(function() {
            alert('hello from binded function call');
            //do stuff here...
        });
      });
});

Es funktioniert, weil Sie es an jedes spezifische Element anhängen. Aus diesem Grund müssen Sie – nachdem Sie Ihren Link zum DOM hinzugefügt haben – einen Weg finden, Ihr hinzugefügtes Element explizit als JQuery-Element im DOM auszuwählen und das Click-Ereignis daran zu binden.

Der beste Weg wird wahrscheinlich – wie vorgeschlagen – sein, es über die Live-Methode an eine bestimmte Klasse zu binden.

Question 7

Es ist möglich und manchmal notwendig, das Klickereignis zusammen mit dem Element zu erstellen. Dies ist beispielsweise der Fall, wenn eine selektorbasierte Bindung keine Option ist. Der Schlüsselteil besteht darin, das Problem zu vermeiden, von dem Tobias gesprochen hat, indem Sie es verwenden .replaceWith() auf einem einzigen Element. Beachten Sie, dass dies nur ein Proof of Concept ist.

<script>
    // This simulates the object to handle
    var staticObj = [
        { ID: '1', Name: 'Foo' },
        { ID: '2', Name: 'Foo' },
        { ID: '3', Name: 'Foo' }
    ];
    staticObj[1].children = [
        { ID: 'a', Name: 'Bar' },
        { ID: 'b', Name: 'Bar' },
        { ID: 'c', Name: 'Bar' }
    ];
    staticObj[1].children[1].children = [
        { ID: 'x', Name: 'Baz' },
        { ID: 'y', Name: 'Baz' }
    ];

    // This is the object-to-html-element function handler with recursion
    var handleItem = function( item ) {
        var ul, li = $("<li>" + item.ID + " " + item.Name + "</li>");

        if(typeof item.children !== 'undefined') {
            ul = $("<ul />");
            for (var i = 0; i < item.children.length; i++) {
                ul.append(handleItem(item.children[i]));
            }
            li.append(ul);
        }

        // This click handler actually does work
        li.click(function(e) {
            alert(item.Name);
            e.stopPropagation();
        });
        return li;
    };

    // Wait for the dom instead of an ajax call or whatever
    $(function() {
        var ul = $("<ul />");

        for (var i = 0; i < staticObj.length; i++) {
            ul.append(handleItem(staticObj[i]));
        }

        // Here; this works.
        $('#something').replaceWith(ul);
    });
</script>
<div id="something">Magical ponies ♥</div>

Question 8

    function load_tpl(selected=""){
        $("#load_tpl").empty();
        for(x in ds_tpl){
            $("#load_tpl").append('<li><a id="'+ds_tpl[x]+'" href="#" >'+ds_tpl[x]+'</a></li>');
        }
        $.each($("#load_tpl a"),function(){
            $(this).on("click",function(e){
                alert(e.target.id);
            });
        });
    }