1675 Stimmen

Eli avatar

Ereignisbindung bei dynamisch erstellten Elementen?

Gefragt el 15 de Oktober, 2008
Wann wurde die Frage gestellt
1012060 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ich habe ein bisschen Code, wo ich bin Schleife durch alle Auswahlfelder auf einer Seite und Bindung einer .hover Ereignis an sie, um ein wenig an ihrer Breite zu schrauben mouse on/off .

Dies geschieht, sobald die Seite fertig ist und funktioniert einwandfrei.

Das Problem, das ich habe, ist, dass alle Auswahlfelder, die ich über Ajax oder DOM nach der ersten Schleife hinzufügen, nicht das Ereignis gebunden haben.

Ich habe dieses Plugin gefunden ( jQuery Live Query Plugin ), aber bevor ich ein weiteres 5k zu meinen Seiten mit einem Plugin hinzufügen, möchte ich sehen, ob jemand einen Weg kennt, dies zu tun, entweder mit jQuery direkt oder durch eine andere Option.

Gefragt el 15 de Oktober, 2008 von Eli

Antworten

Zu viele Anzeigen?

45voto

Mustkeem K avatar
Mustkeem K Punkte 6850

Dies geschieht durch Delegation von Ereignissen . Das Ereignis wird an das Element der Wrapper-Klasse gebunden, aber an das Element der Selektor-Klasse delegiert. So funktioniert es.

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

Und HTML

<div class="wrapper-class">
    <button class="selector-class">
      Click Me!
    </button>
</div>

Anmerkung: Das Element der Wrapper-Klasse kann alles sein, z.B. document, body oder Ihr Wrapper. Wrapper sollte bereits existieren . Allerdings, selector muss nicht unbedingt beim Laden der Seite angezeigt werden. Es kann auch später kommen und das Ereignis wird auf selector auf jeden Fall .

Beantwortet el 14 de Juni, 2018 von Mustkeem K (6850 Punkte )

0 Stimmen

Avatar von Asad Ali

Ja, aber es wird Ereignisausbreitung für Elemente erstellen. Sie müssen Ziel das spezifische dynamische Element hinzufügen und stoppen Ereignisausbreitung.

Kommentiert el 5 de August, 2020 von Asad Ali

0 Stimmen

Avatar von Mustkeem K

Falls Sie dasselbe Ereignis an über- und untergeordnete Elemente binden, können Sie es mit event.stopPropagation() stoppen.

Kommentiert el 6 de August, 2020 von Mustkeem K

44voto

user670265 avatar
user670265 Punkte 469

Versuchen Sie zu verwenden .live() anstelle von .bind() die .live() wird binden .hover zu Ihrem Kontrollkästchen, nachdem die Ajax-Anfrage ausgeführt wurde.

Beantwortet el 21 de Marsch, 2011 von user670265 (469 Punkte )

35 Stimmen

Avatar von chridam

Die Methode live() wurde in Version 1.7 veraltet zugunsten von on und in Version 1.9 gelöscht.

Kommentiert el 17 de Juni, 2014 von chridam

39voto

MadeInDreams avatar
MadeInDreams Punkte 1913

Ereignisbindung bei dynamisch erstellten Elementen

Einzelnes Element:

$(document.body).on('click','.element', function(e) {  });

Element Kind:

 $(document.body).on('click','.element *', function(e) {  });

Beachten Sie den Zusatz * . Für alle Kinder dieses Elements wird ein Ereignis ausgelöst.

Das habe ich festgestellt:

$(document.body).on('click','.#element_id > element', function(e) {  });

Es funktioniert nicht mehr, aber es hat vorher funktioniert. Ich habe jQuery von Google verwendet CDN aber ich weiß nicht, ob sie es geändert haben.

Beantwortet el 22 de Januar, 2016 von MadeInDreams (1913 Punkte )

0 Stimmen

Avatar von MadeInDreams

Ja, und sie sagen nicht (document.body), sondern Vorfahren, die so ziemlich alles sein können.

Kommentiert el 23 de Januar, 2016 von MadeInDreams

38voto

Vatsal avatar
Vatsal Punkte 1878

Ich bevorzuge die Verwendung des Selektors und wende ihn auf das Dokument an.

Diese bindet sich an das Dokument und gilt für die Elemente, die nach dem Laden der Seite gerendert werden.

Zum Beispiel:

$(document).on("click", 'selector', function() {
    // Your code here
});
Beantwortet el 21 de November, 2015 von Vatsal (1878 Punkte )

4 Stimmen

Avatar von Mark Baijens

Sie sollten darauf abzielen, es an das nächstgelegene statische Elternteil zu binden, nicht an das gesamte Dokument.

Kommentiert el 21 de September, 2020 von Mark Baijens

29voto

Fazi avatar
Fazi Punkte 3731

Sie können die live()-Methode verwenden, um Elemente (auch neu erstellte) an Ereignisse und Handler zu binden, z. B. an das onclick-Ereignis.

Hier ist ein Beispielcode, den ich geschrieben habe, in dem Sie sehen können, wie die live()-Methode ausgewählte Elemente, auch neu erstellte, an Ereignisse bindet:

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>

    <body>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>

        <input type="button" id="theButton" value="Click" />
        <script type="text/javascript">
            $(document).ready(function()
                {
                    $('.FOO').live("click", function (){alert("It Works!")});
                    var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
                                                                                                         autoOpen: false,
                                                                                                         tite: 'Basic Dialog'
                                                                                                     });
                    $('#theButton').click(function()
                    {
                        $dialog.dialog('open');
                        return('false');
                    });
                    $('#CUSTOM').click(function(){
                        //$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>');
                        var button = document.createElement("input");
                        button.setAttribute('class','FOO');
                        button.setAttribute('type','button');
                        button.setAttribute('value','CLICKMEE');
                        $('#container').append(button);
                    });
                    /* $('#FOO').click(function(){
                                                     alert("It Works!");
                                                 }); */
            });
        </script>
    </body>
</html>
Beantwortet el 21 de Dezember, 2011 von Fazi (3731 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

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:

Yandex
X