jQuery .on ('เปลี่ยน', ฟังก์ชั่น () {} ไม่เรียกสำหรับอินพุตที่สร้างขึ้นแบบไดนามิก

ปัญหาคือฉันมีชุดของแท็กอินพุตที่สร้างขึ้นแบบไดนามิกบางส่วนและฉันยังมีฟังก์ชั่นที่ตั้งใจจะทริกเกอร์เมื่อใดก็ตามที่มีการเปลี่ยนแปลงค่าอินพุต

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

อย่างไรก็ตาม.on('change')จะไม่มีการทริกเกอร์สำหรับอินพุตใด ๆ ที่สร้างขึ้นแบบไดนามิกเฉพาะสำหรับรายการที่มีอยู่เมื่อโหลดหน้าเว็บ โชคไม่ดีที่นี่ทำให้ฉันรู้สึกผูกพันอย่างที่.onควรจะเป็นเพื่อทดแทน.live()และ.delegate()สิ่งเหล่านี้เป็นสิ่งห่อหุ้มสำหรับ.bind(): /

มีใครเคยมีปัญหานี้หรือรู้วิธีการแก้ปัญหา?

คุณควรให้ตัวเลือกแก่onฟังก์ชัน:

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

ในกรณีนี้มันจะทำงานได้ตามที่คุณคาดหวัง นอกจากนี้ยังเป็นการดีกว่าที่จะระบุองค์ประกอบบางอย่างแทนเอกสาร

อ่านบทความนี้เพื่อความเข้าใจที่ดีขึ้น: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

ใช้สิ่งนี้

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

คุณสามารถใช้วิธีใดวิธีหนึ่งต่อไปนี้:

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

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

เพียงชี้แจงความสับสนที่อาจเกิดขึ้น ใช้งานได้เมื่อมีองค์ประกอบอยู่ในโหลด DOM เท่านั้น:

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

เมื่อองค์ประกอบถูกโหลดแบบไดนามิกในภายหลังคุณสามารถใช้:

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

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

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

คุณสามารถใช้เหตุการณ์ 'อินพุต' ที่เกิดขึ้นเมื่อองค์ประกอบรับอินพุตของผู้ใช้

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

เอกสารประกอบจากw3

คุณสามารถใช้ได้:

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

มันทำงานกับฉัน