jQuery $ .change 함수가 복제 된 선택과 작동하지 않습니다.

Question

마지막 행을 복제하여 아래쪽에 행을 추가하는 버튼이있는 표가 있습니다. 각 행에는 다른 이름 (0-9)의 <select>이 들어 있으며, 모두 <select> 개의 개체에는 .variable_priority 클래스가 있습니다. 버튼을 누르면 행이 성공적으로 복사되고 이름을 올바르게 변경합니다 (10, 11, 12 등). 행은 완벽한 복사이므로 동일한 클래스를 가져옵니다. 나는 다음과 같은 기능을 실행할 때

그러나, 나는 복제 된 테이블 행에 문제가 발생 :

$('.variable_priority').change(function() { 
    var selections = new Array(); 
    $(".variable_priority").each(function() { 
     selections.push($(this).find('option:selected').val()); 
    }); 

    // Iterating on Options of Select 
    $('.variable_priority').children('option').each(function() { 
     $(this).removeAttr('disabled'); 

     if($.inArray($(this).val(), selections) !== -1){ 
      if($(this).val() != 0){ 
       if($(this).is(':selected')){ 
        // nothing 
       } else { 
        $(this).attr('disabled', true); 
       } 
      } 
     } 
    }); 
}); 

그것은 단지 10으로 실행하지만, 나는 <select>의 선택 옵션을 변경할 때마다 실행해야합니다 기능 원래 것들. 이 함수는 복제 된 행에서 옵션을 변경할 때 실행되지 않습니다. 그러나 원본 중 하나에서 값을 변경하면 함수가 실행되고 복제 된 행의 값이 selections 배열에 추가됩니다.

그래서 어떤 이유로 코드는 복제본이 동일한 클래스를 인식하지만 값을 변경할 때 실행되지 않습니다.

편집 : 위의 코드에 대한 간단한 설명; <select>의 선택된 값을 변경하면 함수는 선택한 모든 옵션을 배열에 추가하고 값 자체가 선택된 상자를 제외하고 선택에서 모든 선택된 옵션을 비활성화합니다 (첫 번째 상자에서 '2'를 선택하면 , '2'는 다른 모든 상자에서 비활성화 됨). 당신의 select 요소가 동적이기 때문에

Answer 1

은 (는 후 DOM 에 초기 페이지로드를 추가, 또는 구체적으로, 초기 이벤트 핸들러 첨부 후) 당신이 당신의 change 이벤트 핸들러를 위임해야합니다

$(document).on('change', '.variable_priority', function() { 

}); 

오히려하지만 사용 document보다, 당신은 .variable_priority에 가장 가까운 정적 요소에 이벤트 핸들러를 첨부 할 수 있습니다.

JSFiddle

Answer 2

나는 코드가 새로운 클론에 실행되지 않습니다 생각합니다.

이 스크립트는 시작할 때로드됩니다. 새 어린이를 추가 할 때마다 그것을 수행해야합니다. 새 스크립트를 추가 한 후이 스크립트를 새 스크립트에 맞게 실행하십시오.