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

147

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

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

Namun .on('change')itu tidak memicu input apa pun yang dibuat secara dinamis, hanya untuk item yang ada saat halaman dimuat. Sayangnya ini membuat saya sedikit mengikat sebagaimana .ondimaksudkan untuk menjadi pengganti .live()dan yang .delegate()semuanya adalah pembungkus untuk .bind(): /

Adakah orang lain yang memiliki masalah ini atau mengetahui solusinya?

javascript jquery

— Nick
sumber

272

Anda harus menyediakan pemilih ke onfungsi:

$(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/

— Artem Vyshniakov
sumber

1

Kamu Menakjubkan! Saya juga mengalami masalah ini. Tidak pernah berpikir Anda bisa menambahkan pemilih sebagai parameter kedua.

— Tomatrox

1

ya seperti yang ditunjukkan bagus untuk mempersempit ke beberapa elemen daripada seluruh dokumen, dalam kasus jika bagian dinamis setelah beberapa div menggunakan yang satu, misalnya: $ ('# ajax_table'). pada ('ubah', 'masukan ', function () {...

— Raul Gomez

3

Jika elemen saya dibuat dinamikal, bagaimana saya bisa bekerja dengannya nanti? $ Ini memberi saya objek kosong.

— aleXela

Itu bekerja seperti pesona. Terima kasih banyak ! Selain itu, kita dapat menggunakan .once () untuk mencegah penambahan dua kali logika yang sama;)

— benftwc

Sintaks alternatif: $(document).on({ change: handleChange }, 'input');plus fungsinya const handleChange = (event) => { $(event.target)...Senang menghindari masalah this.

— Dem Pilafian

23

Gunakan ini

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

— Dixon
sumber

FYI, @enrey merujuk $('#id')pada kode alih-alih'#id'

— Loaf

14

Anda dapat menerapkan 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
});

— Arsman Ahmad
sumber

3

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

— Azhar
sumber

11

hmm ... bagaimana dengan sedikit penjelasan cuplikan?

— kleopatra

12

Ini masih tidak akan berfungsi dengan elemen yang dibuat secara dinamis, karena mencoba untuk mengikat pada pemuatan dokumen. Namun jawaban oleh @ArtemVyshniakov mengikat dokumen tersebut, dan ketika sesuatu di salah satu elemen berubah, maka dipecat, karena argumen kedua ia kemudian dapat menargetkan elemen yang diperlukan. (artinya ketika fungsi diaktifkan, ia akan memeriksa apakah sumber pemicu cocok dengan parameter kedua)

— FullyHumanProgrammer

Kode ini tidak akan berfungsi sampai ia menggunakan DOM yang sudah dimuat sebelumnya. Anda harus melewati pemilih sebagai variabel yang terkait dengan dokumen api.jquery.com/on/#on-events-selector-data

— benftwc

2

Hanya untuk mengklarifikasi beberapa potensi kebingungan. Ini hanya berfungsi ketika elemen hadir pada beban DOM:

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

Saat elemen dimuat secara dinamis di lain waktu, Anda dapat menggunakan:

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

— dynero
sumber

2

$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}

— Vinod Kumar
sumber

1

Anda dapat menggunakan acara 'input', yang terjadi ketika suatu elemen mendapat input pengguna.

$(document).on('input', '#input_id', function() {
  // this will fire all possible change actions
});

dokumentasi dari w3

— Alex
sumber

1

kamu bisa memakai:

$('body').ready(function(){
   $(document).on('change', '#elemID', function(){
      // do something
   });
});

Itu bekerja dengan saya.

— Yehia Fouad
sumber