Problem mit Selektoren & .html() in jquery?

Question

Die mit dem Selektor verknüpfte Funktion funktioniert nicht mehr, wenn ich den Inhalt mit Hilfe von .html() ersetze. Da kann ich nicht meinen ursprünglichen Code schreiben habe ich ein Beispiel geschaffen zu zeigen, was ich meine ...

JQuery:

$(document).ready(function(){ 
$("#pg_display span").click(function(){ 
    var pageno = $(this).attr("id"); 
    alert(pageno); 
    var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>"; 
    $("#pg_display").html(data); 

}); 
}); 

Html:

<div id="pg_display"> 
<span id="page1">1</span> 
<span id="page2">2</span> 
<span id="page3">3</span> 
</div > 

Ist sie eine Möglichkeit, um das zu beheben ?? ... Danke

Answer 1

Nicht sicher, dass ich Sie vollständig verstehe, aber wenn Sie fragen, warum .click() Funktionen nicht auf s funktionieren Pfannen, die später hinzugefügt werden, müssen Sie .live() verwenden,

$("#someSelector span").live("click", function(){ 
    # do stuff to spans currently existing 
    # and those that will exist in the future 
}); 

Diese Funktionalität auf jedes Element auf der Seite zur Zeit hinzufügen, und jedes Element, das später erstellt wird. Sie müssen die Handler erneut anhängen, wenn neue Elemente erstellt werden.

Answer 2

Sie müssen das Ereignis erneut binden, nachdem Sie das HTML ersetzt haben, da das ursprüngliche DOM-Element nicht mehr vorhanden ist. Um dies zu ermöglichen, müssen Sie eine benannte Funktion statt einer anonymen Funktion erstellen.

function pgClick() { 
    var pageno = $(this).attr("id"); 
    alert(pageno); 
    var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>"; 
    $("#pg_display").html(data); 

    $("#pg_display span").click(pgClick); 
} 

$(document).ready(function(){ 
    $("#pg_display span").click(pgClick); 
}); 

Answer 3

Verwenden Sie die $ („# pg_display span“) leben (‚Klick‘, Funktion ....) -Methode statt .klicken. Live (verfügbar in JQuery 1.3.2) bindet an vorhandene und FUTURE-Übereinstimmungen, während die click- (und .bind) -Funktion nur an vorhandene Objekte gebunden ist und nicht an neue. Sie müssen (vielleicht?) Auch die Daten von der Funktion trennen, oder Sie fügen bei jedem Klick immer neue Span-Tags hinzu.

http://docs.jquery.com/Events/live#typefn

Answer 4

Das ist zu erwarten, da die DOM-Elemente, die Ihren Click-Handler hatte angebracht sind durch neue ersetzt worden.

Das einfachste Mittel ist use 1.3's new "live" events.

Answer 5

In Ihrer Situation können Sie das Ereignisdelegierungskonzept verwenden und es zum Laufen bringen.

Die Ereignisdelegierung verwendet die Tatsache, dass ein für ein Element generiertes Ereignis bis zum übergeordneten Element weitergesprudelt wird, sofern keine weiteren übergeordneten Elemente vorhanden sind. Anstatt das Klickereignis zu binden, finden Sie das Klickereignis auf Ihrem #pg_display div.

$(document).ready(
    function() 
    { 
     $("#pg_display").click(
      function(ev) 
      { 
       //As we are binding click event to the DIV, we need to find out the 
       //'target' which was clicked. 
       var target = $(ev.target); 

       //If it's not span, don't do anything. 
       if(!target.is('span')) 
        return;     

       alert('page #' + ev.target.id); 
       var data="<span id='page1'>1</span><span id='page2'>2</span><span id='page3'>3</span>"; 
       $("#pg_display").html(data); 

      } 
     ); 
    } 
); 

Arbeits Demo: http://jsbin.com/imuye

Code: http://jsbin.com/imuye/edit

Der obige Code hat zusätzlichen Vorteil, dass statt 3 Event-Handler zu binden, ist es nur ein bindet.