it-swarm.com.de

Klickereignis funktioniert nicht bei dynamisch generierten Elementen

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $("button").click(function() {
                $("h2").html("<p class='test'>click me</p>")
            });   

            $(".test").click(function(){
                alert();
            });
        });

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>

Ich habe versucht, ein neues Tag mit dem Klassennamen test im <h2> zu generieren, indem ich auf die Schaltfläche geklickt habe. Ich habe auch ein Klickereignis definiert, das mit test verknüpft ist. Aber die Veranstaltung funktioniert nicht.

Kann jemand helfen?

453
cheng

Die click()-Bindung, die Sie verwenden, wird als "direkte" Bindung bezeichnet, die den Handler nur an Elemente anfügt, die bereits existieren . Es wird nicht an Elemente gebunden, die in der Zukunft erstellt werden. Dazu müssen Sie eine "delegierte" Bindung mit on() erstellen.

Delegierte Ereignisse haben den Vorteil, dass sie Ereignisse von untergeordneten Elementen verarbeiten können, die zu einem späteren Zeitpunkt zum Dokument hinzugefügt werden.

Quelle

Folgendes suchen Sie:

var counter = 0;

$("button").click(function() {
    $("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});

// With on():

$("h2").on("click", "p.test", function(){
    alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>

Das Obige funktioniert für Benutzer von jQuery Version 1.7+. Wenn Sie eine ältere Version verwenden, lesen Sie die vorherige Antwort weiter unten.


Vorherige Antwort :

Versuchen Sie es mit live() :

$("button").click(function(){
    $("h2").html("<p class='test'>click me</p>")
});   


$(".test").live('click', function(){
    alert('you clicked me!');
});

Hat für mich gearbeitet. Versuchte es mit jsFiddle.

Oder es gibt eine neue Art, dies mit delegate() zu tun:

$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});

Eine aktualisierte jsFiddle .

652
Cᴏʀʏ

Verwenden Sie die .on() -Methode mit delegierten Ereignissen

$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});

Mit der Methode .on() können Sie einen beliebigen Ereignishandler an folgende Aufgaben delegieren:
aktuelle Elemente oder zukünftige Elemente, die dem DOM hinzugefügt wurden zu einem späteren Zeitpunkt.

P.S: Verwenden Sie nicht .live()! Ab jQuery 1.7 ist die Methode .live() veraltet.

205
Roko C. Buljan

Grund:

In jQuery wird durch Klicken () der Ereignishandler nur angehängt, wenn das Element bereits im HTML-Code vorhanden ist.

Das neue Element, das nach dem Laden der Seite dynamisch erstellt wird (zukünftiges Element), wird nicht berücksichtigt.

Dynamische Elemente werden mit Hilfe von Javascript oder jquery (nicht in html) erstellt.

Das Klickereignis wird also nicht ausgelöst.

Lösung:

Um dies zu überwinden, sollten wir die Funktion on () verwenden.

delegate (), live () und on () Funktionen haben die Vorteile gegenüber den DOM-Elementen.

on kann sowohl vorhandene als auch zukünftige Elemente auslösen.

on kann die Elemente berücksichtigen, die alle auf der ganzen Seite vorhanden sind.

delegate () -, live () -Funktionen sind veraltet (verwenden Sie diese nicht).

Sie sollten die Funktion on verwenden, um das Ereignis für dynamisch erstellte (zukünftige) Elemente auszulösen.

Entfernen Sie den Code aus $ (document) .ready:

$(".test").click(function(){

  alert();

});

Ändern in:

$(document).on('click','.test',function(){

  alert('Clicked');

});
93
Prabhagaran

Fügen Sie diese Funktion in Ihre js-Datei ein.Funktioniert in jedem Browser

$(function() {
    $(document).on("click", '#mydiv', function() {
        alert("You have just clicked on ");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>Div</div>
19
Abhishek

Veränderung

 $(".test").click(function(){

Zu

 $(".test").live('click', function(){

LIVE DEMO

jQuery .live()

13
qwertymk

Sie müssen . Live verwenden, damit dies funktioniert:

$(".test").live("click", function(){
   alert();
});

oder wenn du jquery 1.7+ verwendest, benutze . on :

$(".test").on("click", "p", function(){
   alert();
});
12
amurra

Versuchen Sie .live() oder .delegate()

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Ihr .test -Element wurde nach der .click() -Methode hinzugefügt, sodass das Ereignis nicht daran angehängt war. Live und Delegate geben diesen Ereignisauslöser an übergeordnete Elemente weiter, die ihre untergeordneten Elemente überprüfen, sodass alle anschließend hinzugefügten Elemente weiterhin funktionieren. Ich denke, Live überprüft den gesamten Dokumenttext, während Delegate einem Element zugewiesen werden kann, sodass Delegate effizienter ist.

Mehr Info:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

7
DSKrepps

In der jQuery-Dokumentation habe ich zwei Lösungen gefunden:

Erstens: Verwenden Sie delegieren für Text oder Dokument

Z.B:

 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });

Warum?

Antwort: Fügen Sie einem oder mehreren Ereignissen einen Handler für alle Elemente hinzu, die jetzt oder in Zukunft mit der Auswahl übereinstimmen, basierend auf einer bestimmten Menge von Stammelementen . Link: http://api.jquery.com/delegate/

Zweitens: Platzieren Sie Ihre Funktion unter "$ (document)" mit "on" und fügen Sie sie dem Element hinzu, das Sie möchten dies auslösen. Der erste Parameter ist der "Event-Handler", der zweite das Element und der dritte die Funktion. Z.B:

 $( document ).on( 'click', '.test', function () {
 ...
  alert('test');
 });

Warum?

Antwort: Event-Handler sind nur an die aktuell ausgewählten Elemente gebunden. Sie müssen auf der Seite vorhanden sein, wenn Ihr Code aufruft. on () . Um sicherzustellen, dass die Elemente vorhanden sind und ausgewählt werden können, führen Sie eine Ereignisbindung in einem dokumentenfertigen Handler für Elemente aus, die sich im HTML-Markup auf der Seite befinden. Wenn neues HTML in die Seite eingefügt wird, wählen Sie die Elemente aus und fügen Sie Ereignishandler hinzu, nachdem das neue HTML in die Seite eingefügt wurde. Oder verwenden Sie delegierte Ereignisse, um einen Ereignishandler anzuhängen, wie im folgenden Link beschrieben: https://api.jquery.com/on/

6
user3425150

Die beste Möglichkeit, ein Ereignis mithilfe der Delegierung auf dynamisch generierte Inhalte anzuwenden.

$(document).on("eventname","selector",function(){
    // code goes here
});

ihr Code ist jetzt so

$(document).on("click",".test",function(){
    // code goes here
});
5
Jay Patel

Das Problem, das Sie haben, besteht darin, dass Sie versuchen, die Klasse "test" an das Ereignis zu binden, bevor eine Klasse "test" in DOM vorhanden ist. Obwohl es so aussieht, als ob dies alles dynamisch wäre, passiert tatsächlich, dass JQuery über das DOM geht und das Klickereignis verkabelt, wenn die ready() -Funktion ausgelöst wird, was vor Ihnen passiert hat in Ihrem Schaltflächenereignis "Klick mich" erstellt.

Durch Hinzufügen des Click-Ereignisses "test" zum Click-Handler "button" wird die Verbindung hergestellt, nachdem das richtige Element in DOM vorhanden ist.

<script type="text/javascript">
    $(document).ready(function(){                          
        $("button").click(function(){                                  
            $("h2").html("<p class='test'>click me</p>")                          
            $(".test").click(function(){                          
                alert()                          
            });       
        });                                     
    });
</script>

Die Verwendung von live() (wie bereits erwähnt) ist eine weitere Möglichkeit, aber ich war der Meinung, dass es auch eine gute Idee war, auf den geringfügigen Fehler in Ihrem JS-Code hinzuweisen. Was Sie geschrieben haben, war nicht falsch, es musste nur der richtige Umfang haben. Zu begreifen, wie DOM und JS funktionieren, ist für viele traditionelle Entwickler eine der schwierigen Aufgaben, den Kopf herumzureißen.

live() ist eine sauberere Methode, um damit umzugehen, und in den meisten Fällen die richtige. Es geht im Wesentlichen darum, das DOM zu beobachten und die Dinge neu zu verkabeln, wenn sich die darin enthaltenen Elemente ändern.

4
Marc LaFleur
$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});

Funktioniert nur, wenn der DIV mit der Klasse .surrounding_div_class der unmittelbare Elternteil des Objekts .test ist

Wenn es ein anderes Objekt in der div gibt, das gefüllt wird, funktioniert es nicht.

4
Nikolaus Pluta

Die .live-Funktion funktioniert hervorragend.

Es ist für dynamisch hinzugefügte Elemente auf der Bühne.

$('#selectAllAssetTypes').live('click', function(event){
                    alert("BUTTON CLICKED");
                    $('.assetTypeCheckBox').attr('checked', true);
                });

Prost, Ankit.

3
Ankit Tanna

Wenn Sie einen dynamisch hinzugefügten Link zu einem Container oder der Leiche haben:

var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);

sie können das rohe Javascript-Element verwenden und einen Ereignis-Listener hinzufügen, z. B. den Klick :

newLink.get(0).addEventListener("click", doActionFunction);

Unabhängig davon, wie oft Sie diese neue Verknüpfungsinstanz hinzufügen, können Sie sie so verwenden, als ob Sie eine Funktion jquery click verwenden würden.

function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}

So erhalten Sie eine Nachricht mit der Aufschrift

Es ist in Ordnung

Es hat eine bessere Leistung als andere Alternativen.

Extra: Sie könnten eine bessere Leistung erzielen, wenn Sie keine Suchanfragen stellen und einfaches Javascript verwenden. Wenn Sie IE bis Version 8 verwenden, sollten Sie diese Polyfill verwenden, um die Methode addEventListener zu verwenden.

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }
3
EliuX

Eine alternative und prägnantere Alternative (IMHO) besteht darin, eine unformatierte Javascript-Funktion zu verwenden, die auf ein Ereignis beim Klicken reagiert, und dann das Zielelement an jQuery zurückzugeben, wenn Sie möchten. Der Vorteil dieses Ansatzes besteht darin, dass Sie Ihr Element dynamisch an einer beliebigen Stelle hinzufügen können und der Click-Handler "nur funktioniert" und Sie sich nicht mit der Delegierung der Steuerung an übergeordnete Elemente usw. befassen müssen.

Schritt 1: Aktualisieren Sie das dynamische HTML, um ein On-Click-Ereignis auszulösen. Stellen Sie sicher, dass Sie das 'event'-Objekt als Argument übergeben

 
 $ ("button"). click (function () {
 $ ("h2"). html ("<p class = 'test'  onclick = 'test (event)' > klick mich an </ p> ") 
}); 
 

Schritt 2: Erstellen Sie die Testfunktion, um auf das Klickereignis zu reagieren

 
 Funktionstest (e) {
 Alarm (); 
}); 
 

Optional Schritt 3: Wenn Sie jQuery verwenden, ist es wahrscheinlich hilfreich, einen Verweis auf die Schaltfläche "Quelle" zu erhalten

 
 Funktionstest (e) {
 Alarm (); 
 
 // Verweis auf die Schaltfläche 
 // Eine Erklärung dieser Zeile ist verfügbar  hier  
 Var target = (e.target)? e.target: e.srcElement; 
 
 // Übergebe den Schaltflächenverweis an jQuery, um jQuery-Magie auszuführen 
 var $ btn = $ (target); 
 
}); 
 
3
Nick Mitchell

Ich konnte weder live noch delegieren, um an einem Div in einer Lightbox (tinybox) zu arbeiten.

Ich habe setTimeout erfolgreich verwendet, und zwar auf folgende einfache Weise:

$('#displayContact').click(function() {
    TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
    setTimeout(setContactClick, 1000);
})

function setContactClick() {
    $('#contactSubmit').click(function() {
        alert($('#contactText').val());
    })
}
3
Sasha Shepherd

Sie können auch das onclick="do_something(this)"inside-Element verwenden

3
Daryn K.

Die Jquery .on funktioniert in Ordnung, aber ich hatte einige Probleme beim Rendern, indem ich einige der oben genannten Lösungen implementierte. Mein Problem bei der Verwendung von .on ist, dass die Ereignisse irgendwie anders gerendert wurden als bei der Methode .hover.

Nur zu Ihrer Information für alle anderen, die möglicherweise auch das Problem haben. Ich habe mein Problem gelöst, indem ich das Hover-Ereignis für das dynamisch hinzugefügte Element neu registriert habe:

registrieren Sie das Hover-Ereignis erneut, da der Hover für dynamisch erstellte Elemente nicht funktioniert. Jedes Mal, wenn ich ein neues/dynamisches Element erstelle, füge ich den Hover-Code erneut hinzu. funktioniert perfekt

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);
3
user2257720

Sie können dynamisch erstellten Elementen einen Klick hinzufügen. Beispiel unten. Verwenden eines Zeitpunkts, um sicherzustellen, dass der Vorgang abgeschlossen ist. In meinem Beispiel greife ich mit der Klassenerweiterung zu einem Div, füge einen Bereich mit dem Zusatz "Klicken, um mehr zu sehen" hinzu und verwende diesen Bereich dann, um den ursprünglichen Div auszublenden/anzuzeigen.

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});
2
Daryl H

Ich arbeite mit Tabellen, die dynamisch neue Elemente hinzufügen. Wenn Sie on () verwenden, funktioniert dies nur, wenn Sie ein nicht dynamisches übergeordnetes Element wie folgt verwenden:

<table id="myTable">
    <tr>
        <td></td> // Dynamically created
        <td></td> // Dynamically created
        <td></td> // Dynamically created
    </tr>
</table>

<input id="myButton" type="button" value="Push me!">

<script>
    $('#myButton').click(function() {
        $('#myTable tr').append('<td></td>');
    });

    $('#myTable').on('click', 'td', function() {
        // Your amazing code here!
    });
</script>

Dies ist sehr nützlich, da Sie zum Entfernen von Ereignissen, die mit on () verknüpft sind, off () und zum einmaligen Verwenden von Ereignissen one) verwenden können () .

2
Timbergus

Verwenden Sie 'on', wenn der Klick an die bereits vorhandenen Elemente gebunden wird.

Für z.B.

$('test').on('click',function(){
    alert('Test');
})

Das wird helfen.

0
Abhijit