Klick-Ereignis funktioniert nicht bei dynamisch erzeugten Elementen

Question

Klick-Ereignis funktioniert nicht bei dynamisch erzeugten Elementen

Gefragt el 12 de Juli, 2011: Wann wurde die Frage gestellt
622383 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Diese Frage hat bereits Antworten:

Ereignisbindung bei dynamisch erstellten Elementen? (23 Antworten )

<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 dans le <h2> indem Sie auf die Schaltfläche klicken. Ich habe auch ein Klick-Ereignis definiert, das mit test . Aber das Ereignis funktioniert nicht.

Kann jemand helfen?

Gefragt el 12 de Juli, 2011 von cheng

Answer 1

5 Antworten

Answer 2

800voto

Cᴏʀʏ Punkte 101076

El click() Die von Ihnen verwendete Bindung wird als "direkte" Bindung bezeichnet, bei der der Handler nur an Elemente gebunden wird, die bereits existieren . Es wird nicht an Elemente gebunden, die in der Zukunft erstellt werden. Um das zu erreichen, müssen Sie eine "delegierte" Bindung erstellen, indem Sie on() .

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

Quelle

Hier ist, wonach Sie suchen:

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 diejenigen, die jQuery Version 1.7+ verwenden. Wenn Sie eine ältere Version verwenden, lesen Sie die vorherige Antwort 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 bei mir funktioniert. Ausprobiert mit jsFiddle.

Oder es gibt eine neumodische Methode, das mit delegate() :

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

Ein aktualisiertes jsFiddle .

Beantwortet el 12 de Juli, 2011 von Cᴏʀʏ (101076 Punkte )

Answer 3

266voto

Roko C. Buljan Punkte 178158

Verwenden Sie die .on() Methode mit delegierten Ereignissen

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

El .on() Methode können Sie jeden gewünschten Event-Handler delegieren:
aktuell Elemente oder Zukunft Elemente, die dem DOM zu einem späteren Zeitpunkt hinzugefügt werden.

_{P.S.: Verwenden Sie nicht <code>.live()</code> ! Ab jQuery 1.7+ ist die <code>.live()</code> Methode ist veraltet.}

Beantwortet el 26 de Januar, 2013 von Roko C. Buljan (178158 Punkte )

Answer 4

158voto

Prabhagaran Punkte 3340

Der Grund:

In jQuery, Ereignis Click() Direkte Bindung der den Event-Handler nur dann an das Element anhängt, wenn das betreffende Element (Html-Code) auf der Seite (nach dem Laden der Seite) vorhanden ist.

Dynamische Elemente werden mit Hilfe von javascript oder jquery (nicht in Html) .

Zukünftige Elemente (Dynamic), die nach dem Laden der Seite erstellt werden, werden nicht berücksichtigt.

Das normale Klick-Ereignis wird also nicht auf dem dynamischen Element ausgelöst.

Lösung:

Um dies zu vermeiden, sollten wir on() Funktion. on() kann das Ereignis sowohl für das aktuelle als auch für das zukünftige Element delegieren.

Delegierte Ereignisse haben den Vorteil, dass der Handler an die Elemente angehängt werden kann, die zu das Dokument in der Zukunft.

Hinweis: delegate(), live() und on() Funktionen haben die Vorteile gegenüber den DOM-Elementen. Ab JQuery 1.7 sind delegate() und live() veraltet (Verwenden Sie diese nicht).

on() nur Kann das Ereignis sowohl für aktuelle als auch für zukünftige Elemente delegieren.

Ihr Code sollte also wie folgt aussehen

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

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

  alert();

});

Wechseln zu:

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

  alert('Clicked');

});

Beantwortet el 16 de April, 2015 von Prabhagaran (3340 Punkte )

Answer 5

33voto

Abhishek Punkte 361

Fügen Sie diese Funktion in Ihre js-Datei ein. Es funktioniert mit 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>

Beantwortet el 19 de Juli, 2013 von Abhishek (361 Punkte )

Answer 6

13voto

amurra Punkte 14781

Sie müssen Folgendes verwenden .live damit dies funktioniert:

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

oder wenn Sie jquery 1.7+ verwenden, benutzen Sie .an :

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

Beantwortet el 12 de Juli, 2011 von amurra (14781 Punkte )

Klick-Ereignis funktioniert nicht bei dynamisch erzeugten Elementen

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Klick-Ereignis funktioniert nicht bei dynamisch erzeugten Elementen

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: