동적으로 작성된 입력에 대해 jQuery .on ( 'change', function () {}이 트리거되지 않음

문제는 동적으로 생성 된 입력 태그 세트가 있고 입력 값이 변경 될 때마다 트리거하는 기능도 있다는 것입니다.

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

그것은 나와 함께 작동합니다.