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

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

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

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

다음 방법 중 하나를 사용할 수 있습니다.

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


$("#Input_Id").on('change', function(){    // 2nd way
    // do your code here
    // This will specifically call onChange of your element
});

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

사용합니다.

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

잠재적인 혼란을 분명히 하기 위해서입니다.요소가 DOM 로드에 있는 경우에만 작동합니다.

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

나중에 요소를 동적으로 로드하면 다음을 사용할 수 있습니다.

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

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

다음을 사용할 수 있습니다.

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

저랑 잘 어울려요.

요소가 사용자 입력을 받을 때 발생하는 '입력' 이벤트를 사용할 수 있습니다.

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

w3의 문서

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

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

언급URL : https://stackoverflow.com/questions/13418963/jquery-onchange-function-not-triggering-for-dynamically-created-inputs