Warum funktioniert meine jquery.on ('ändern') nicht für dynamisch hinzugefügt wählt

Question

Ich füge ausgewählte Elemente dynamisch, wie im folgenden HTML. Ich bin mir nicht sicher, warum die .on ('ändern' ...) nicht für die dynamische Auswahl funktioniert. Was vermisse ich?

Ich benutze Chrome 24.0.1312.57 + jquery 1.8.3.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#x select').on('change', function() { alert('helo'); }) 
     $('#y select').on('change', function() { alert('helo'); }) 

     $('#x').html($('#y').html()); 
    }); 
</script> 

<div id="x"></div> 
<div id="y"> 
    <select> 
     <option>O1</option> 
     <option>O2</option> 
    </select> 
</div> 

Answer 1

Ihr Code:

$('#x select').on('change', function() { alert('helo'); }) 

legt einen Event-Handler an das Auswahl innerhalb des #x Element.

Was Sie wollen, (von dem, was ich verstanden) ist etwas in den Zeilen:

$("#y").on('change','select',function() { alert('helo'); }); 

Dies legt einen Event-Handler an das #Y Element, das seine Kinder ‚die Option‘ Elemente übertragen wird

von

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

die .on() Methode wird an die aktuell ausgewählten Gruppe von Elementen in dem Objekt jQuery Ereignisbehandlungsroutinen.

Answer 2

korrekte Syntax:

$('#x').on(
     'change', 
     'select', 
      function() { 
      alert('helo'); 
      } 
     ); 

So Syntax von on() für dynamisches Element scheint:

$(staticParent).on(eventName, target, handler); 

Answer 3

Ihre Veranstaltung auf $ (document) .ready gesetzt Bindung(). Wenn Sie sie jedoch später dynamisch hinzufügen (z. B. über jQuery.appendTo() oder Ähnliches), müssen die neu hinzugefügten Komponenten gebunden werden, da sie nicht Teil der ursprünglichen Komponente in $ (document) waren. Ready() , die nur einmal ausgeführt wird, wenn die Seite geladen wird und das DOM anfänglich fertig ist.

Answer 4

Ereignisbindung an Elemente, die beim ersten Laden der Seite nicht im DOM enthalten sind, funktioniert nicht. Sie müssen an ein Element weiter oben im DOM binden, das vorhanden ist, damit das Ereignis ablaufen kann. Dies ist normalerweise der Ansatz, den ich nehme:

$(document).on({ 
    change: function() { 
    alert('helo'); 
    } 
}, '#x select'); 

$(document).on({ 
    change: function() { 
    alert('helo'); 
    } 
}, '#y select'); 

Ich bevorzuge es, wie Sie nachfolgende Ereignisse leicht hinzufügen können.

Answer 5

Der ganze Punkt von .on() ist so, dass Sie das Ereignis an etwas anderes als das Dokument binden können. Dies ist, was die jetzt abgeschriebene .live() tat und es ist in den meisten Fällen ineffizient. Sie sollten das Ereignis an das nächste übergeordnete Element binden, das nicht dynamisch geändert wird.

Soweit ich weiß, ist dies die richtige Syntax:

$('#x').on('change', 'select', function(){ 
    alert('hello'); 
}); 

Wenn #x oder #Y wird geändert, wickeln Sie sie auf ein Element und binden das Ereignis an, dass.

Answer 6

Das ist einfach. Unabhängig von der Klasse oder ID, auf die Sie ausgerichtet sind, versuchen Sie, präziser zu sein, aber Sie müssen keinen Super-Elternteil hinzufügen.

Beispiel für falsche Weg:

 $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) { 
 
      console.log('IN TABLE CONTENT CHANGE'); 
 
      var value = e.target.value; 
 
      $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); 
 

 
      //alert($(ele[0]).html()); 
 
     });

richtige Weg:

 $('#tablecontent').on('change', 'table.CampaignGrid > tbody > tr > td', function(e) { 
 
      console.log('IN TABLE CONTENT CHANGE'); 
 
      var value = e.target.value; 
 
      $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); 
 

 
      //alert($(ele[0]).html()); 
 
     });

bemerke ich die Super-Eltern fallen gelassen: ‚#tab lecontent '

Es geht um Klarheit.

• V

Answer 7

 $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) { 
 
      console.log('IN TABLE CONTENT CHANGE'); 
 
      var value = e.target.value; 
 
      $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); 
 

 
      //alert($(ele[0]).html()); 
 
     });

 $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) { 
 
      console.log('IN TABLE CONTENT CHANGE'); 
 
      var value = e.target.value; 
 
      $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); 
 

 
      //alert($(ele[0]).html()); 
 
     });

 $('#tablecontent').on('change', 'table.CampaignGrid > tbody > tr > td', function(e) { 
 
      console.log('IN TABLE CONTENT CHANGE'); 
 
      var value = e.target.value; 
 
      $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); 
 

 
      //alert($(ele[0]).html()); 
 
     });

 $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) { 
 
      console.log('IN TABLE CONTENT CHANGE'); 
 
      var value = e.target.value; 
 
      $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); 
 

 
      //alert($(ele[0]).html()); 
 
     });

Answer 8

Das Wort in eckigen Klammern ist der Alt-Text, der, wenn der Browser das Bild nicht zeigen kann, angezeigt wird. Achten Sie darauf, aussagekräftigen Alternativtext für Bildschirmlesesoftware einzuschließen.

Answer 9

Verwenden Sie nicht .live()/.bind()/.delegate(), obwohl. Du solltest benutzen . on().

für statische und dynamische wählen Änderungen

$(document).on('change', 'select', function (e) { 
    // do something 
});