Dlaczego mój jquery .on ("zmiana") nie działa dla dynamicznie dodanych wyborów

Question

Dodaję wybrane elementy dynamicznie, tak jak w poniższym kodzie HTML. Nie wiem, dlaczego .on ("zmiana" ...) nie działa dla dynamicznego wyboru. czego mi brakuje?

Używam 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

Kod:

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

przywiązuje programu obsługi zdarzeń do wybierz wewnątrz elementu o numerze x.

Co chcesz (z tego co zrozumiałem) jest czymś w linii:

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

To przywiązuje programu obsługi zdarzeń do elementu #Y który pobiera delegowanego do „Wybierz” elementów jego dzieci

Sposób

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

.on() przykłada obsługi zdarzeń do wybranego zestawu elementów obiektu jQuery.

Answer 2

Poprawna składnia:

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

więc składnia on() dynamicznego elementu wydaje: Wiązanie

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

Answer 3

Twój zdarzenie jest ustawiony na $ (document) .ready(). Jeśli jednak dynamicznie dodajesz je później (np. Przez jQuery.appendTo() lub tym podobne), nowo dodane komponenty muszą być bindowane, ponieważ nie były częścią głównej, która wydarzyła się w $ (document) .ready() , który uruchamia się tylko raz, gdy strona jest załadowana, a DOM jest początkowo gotowy.

Answer 4

Powiązanie zdarzeń z elementami, których nie ma w DOM podczas ładowania strony początkowej, nie będzie działać. Musisz związać się z elementem w kierunku DOM, który istnieje, aby umożliwić wydostanie się zdarzenia. Zwykle jest to podejście, które biorę:

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

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

Preferuję to, ponieważ można łatwo dodać kolejne zdarzenia.

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

Answer 5

Cały punkt .on() jest taki, że można powiązać zdarzenie z czymś innym niż dokument. To właśnie zrobiła teraz zdekoncentrowana funkcja .live() i w większości przypadków jest nieefektywna. Jesteś zobowiązany do powiązania zdarzenia z najbliższym elementem macierzystym, który nie zostanie dynamicznie zmieniony.

O ile jestem świadomy tego jest poprawna składnia:

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

Jeśli #x lub #Y zostaną zmienione, zawinąć je w elemencie i wiążą to wydarzenie do tego.

Answer 6

To jest łatwe. Niezależnie od klasy lub identyfikatora kierowania, staraj się być bardziej precyzyjnym, ale nie musisz uwzględniać superadministratora.

Przykład niewłaściwy sposób:

 $('#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()); 
 
     });

poprawny sposób:

 $('#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()); 
 
     });

Wskazówka rzuciłem super rodzica: „#tab lecontent '

Wszystko na temat przejrzystości.

• 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

Słowo w nawiasie kwadratowym jest alt tekst, który zostanie wyświetlony, jeśli przeglądarka nie może wyświetlić obraz. Pamiętaj, aby dołączyć znaczący tekst alternatywny dla oprogramowania do odczytywania zawartości ekranu.

Answer 9

Nie należy jednak używać .live()/.bind()/.delegate(). Powinieneś użyć . on().

zarówno statycznych i dynamicznych wybranych zmian

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