it-swarm.com.de

Anhängen eines Klickereignisses an ein JQuery-Objekt, das noch nicht zum DOM hinzugefügt wurde

Ich hatte Probleme, das Klickereignis an ein JQuery-Objekt anzuhängen, bevor es dem DOM hinzugefügt wurde.

Grundsätzlich habe ich diese Schaltfläche, die meine Funktion zurückgibt, und füge sie dann an das DOM an. Ich möchte die Schaltfläche mit einem eigenen Klick-Handler zurückgeben. Ich möchte es nicht aus dem DOM auswählen, um den Handler anzuschließen.

Mein Code lautet:

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

Die Schaltfläche, die zurückgegeben wird, kann das Klickereignis nicht abfangen. Wenn ich dies jedoch mache (nachdem der Button zum DOM hinzugefügt wurde):

$('#my-button').click(function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

Es funktioniert ... aber nicht für mich, nicht was ich will.

Es scheint damit zu tun zu haben, dass das Objekt noch nicht Teil des DOM ist.

Oh! Übrigens arbeite ich mit OpenLayers, und das DOM-Objekt, an das ich die Schaltfläche anhange, ist ein OpenLayers.FramedCloud (welches noch nicht Teil des DOM ist, aber sobald einige Ereignisse ausgelöst werden.)

154
danielrvt

Benutze das. Sie können body durch ein übergeordnetes Element ersetzen, das in dom ready vorhanden ist

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

Hier/http://api.jquery.com/on finden Sie weitere Informationen zur Verwendung von on (), da es ab 1.7+ live () ersetzt. 

Nachfolgend wird aufgeführt, welche Version Sie verwenden sollten

$ (Selektor) .live (Ereignisse, Daten, Handler); // jQuery 1.3+

$ (document) .delegate (Selektor, Ereignisse, Daten, Handler); // jQuery 1.4.3+

$ (document) .on (Ereignisse, Selektor, Daten, Handler); // jQuery 1.7+

247
ᾠῗᵲᄐᶌ

Ich bin wirklich überrascht, dass noch niemand dies gepostet hat

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
}) 

Wenn Sie sich nicht sicher sind, welche Elemente sich zu dieser Zeit auf dieser Seite befinden werden, fügen Sie sie einfach an document an. 

Hinweis: Dies ist aus Performance-Sicht suboptimal. Um maximale Geschwindigkeit zu erzielen, sollte versucht werden, die Verbindung zum nächstgelegenen übergeordneten Element des Elements herzustellen, das eingefügt werden soll.

33

Versuchen Sie Folgendes: Ersetzen Sie den Körper durch den übergeordneten Wähler

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});
20
Vins

Versuchen:

$('body').on({
    hover: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    },
    click: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    }
},'#my-button');

jsfiddle Beispiel.

Wenn Sie .on () verwenden und an ein dynamisches Element binden, müssen Sie auf ein Element verweisen, das bereits auf der Seite vorhanden ist (wie in dem Beispiel body). Wenn Sie ein spezifischeres Element verwenden können, wird die Leistung verbessert.

Ereignishandler sind nur an die aktuell ausgewählten Elemente gebunden. Sie muss auf der Seite vorhanden sein, wenn der Code .on () ..__ aufgerufen wird. Um sicherzustellen, dass die Elemente vorhanden sind und ausgewählt werden können, führen Sie das Ereignis .__ aus. Bindung innerhalb eines dokumentenbereiten Handlers für Elemente, die sich in der .__ befinden. HTML-Markup auf der Seite. Wenn neuer HTML-Code in die Seite eingefügt wird, Wählen Sie die Elemente aus, und fügen Sie Ereignishandler an, nachdem der neue HTML-Code _. auf der Seite platziert. Verwenden Sie delegierte Ereignisse, um ein Ereignis anzuhängen Handler, wie nachfolgend beschrieben.

Src: http://api.jquery.com/on/

8
j08691

Sie müssen es anhängen. Erstellen Sie das Element mit:

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

Wenn Sie es anhängen, wird es funktionieren.

Schauen Sie sich Ihr Beispiel hier und eine einfache Version hier an.

8
Marconi

Auf der Veranstaltung

$('#my-button').on('click', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

Oder fügen Sie das Ereignis nach dem Anfügen hinzu

1
Jorge

die jQuery .on-Methode wird zum Binden von Ereignissen verwendet, auch wenn kein Element beim Laden der Seite vorhanden ist .. _. Hier ist link Es wird auf folgende Weise verwendet:

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

Vor jquery 1.7 wurde die . live () -Methode verwendet, die Methode ist jedoch veraltet.

0
Nishu Tayal

Ergänzung der Informationen für diejenigen Personen, die .on () verwenden, um auf Eingaben in kürzlich geladenen Tabellenzellen gebundene Ereignisse zu hören; Es gelang mir, Event-Handler mit delegate () an solche Tabellenzellen zu binden, aber .on () funktionierte nicht.

Ich habe die Tabellen-ID an .delegate () gebunden und einen Selektor verwendet, der die Eingaben beschreibt.

z.B.

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

jQuery

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});
0
Fabien Haddadi

Funktioniert die Verwendung von .live für Sie?

$("#my-button").live("click", function(){ alert("yay!"); }); 

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

EDIT

Seit jQuery 1.7 ist die .live () -Methode veraltet. Verwenden Sie .on (), um Ereignishandler anzuhängen. Benutzer älterer Versionen von jQuery sollten .delegate () anstelle von .live () verwenden.

http://api.jquery.com/on/

0
PsychoDUCK