Pertanyaan jQuery .on ('change', function () {} tidak memicu input yang dibuat secara dinamis


Masalahnya adalah bahwa saya memiliki beberapa set tag input yang dibuat secara dinamis dan saya juga memiliki fungsi yang dimaksudkan untuk memicu setiap kali nilai input diubah.

$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

Namun demikian .on('change') tidak memicu untuk input yang dibuat secara dinamis, hanya untuk item yang ada ketika halaman dimuat. Sayangnya ini membuat saya sedikit terikat .on dimaksudkan untuk menjadi pengganti .live() dan .delegate() yang semuanya adalah pembungkus .bind() : /

Adakah yang punya masalah ini atau tahu solusi?


109
2017-11-16 14:51


asal


Jawaban:


Anda harus memberikan pemilih ke on fungsi:

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

Dalam hal ini, itu akan berfungsi seperti yang Anda harapkan. Juga, lebih baik untuk menentukan beberapa elemen daripada dokumen.

Baca artikel ini untuk pemahaman yang lebih baik: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/


204
2017-11-16 14:53



Gunakan ini

$('body').on('change', '#id', function() {
  // Action goes here.
});

11
2018-05-05 10:58



$("#id").change(function(){
    //does some stuff;
});

2
2017-09-01 12:41



Anda dapat menerapkan salah satu pendekatan:

$("#Input_Id").change(function(){   // 1st
    // do your code here
    // When your element is already rendered
});


$("#Input_Id").on('change', function(){    // 2nd (A)
    // do your code here
    // It will specifically called on change of your element
});

$("body").on('change', '#Input_Id', function(){    // 2nd (B)
    // do your code here
    // It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});

1
2018-05-02 07:14



Hanya untuk memperjelas beberapa potensi kebingungan. Ini hanya berfungsi ketika elemen ada pada beban DOM:

$("#target").change(function(){
    //does some stuff;
});

Ketika elemen dimuat secara dinamis di kemudian hari, Anda dapat menggunakan:

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});

0
2018-04-03 06:40