jQuery 중복은 한 번의 클릭으로 만 작동합니다.

Question

웹에서이 코드를 발견했으며이를 필요에 맞게 재구성하려고합니다. 원래 피들에서는 jQuery 1.7을 사용했지만 1.10을 사용하여 live() 기능을 사용하지 않고 on() 값으로 전환했지만 이제는 한 번만 작동합니다 (많이 복제 할 수는 있지만 제거하거나 복제 할 수는 없습니다). fiddle. 이전 코드로 시도했지만 작동하도록 할 수 없었던 또 다른 사항은 복제 단추를 클릭 할 필요가 없으며 대신 변수에서 중복 값을 가져 오는 for 루프 안에 있어야합니다. 문제 해결을 어렵게하는 오류가 발생하지 않았습니다.

var regex = /^(.*)(\d)+$/i; 
var cloneIndex = $(".clonedInput").length; 
var locations = 3; 
    for(var i = 0; i < locations; i++){ 
     $(this).parents(".clonedInput").clone() 
      .appendTo("body") 
      .attr("id", "clonedInput" + cloneIndex) 
      .find("*").each(function() { 
       var id = this.id || ""; 
       var match = id.match(regex) || []; 
       if (match.length == 3) { 
        this.id = match[1] + (cloneIndex); 
       } 
     }); 
     cloneIndex++; 
    }; 

Answer 1

복제 된 요소를 생성 한 후, 당신은 그래서 당신이에 을 위임 $('body')을 $(document을 청취 할 .click() 투수를 확인해야합니다) 또는 것, 문서에 새로운 DOM 요소를 도입했습니다 그것. 따라서 당신이 당신의 .click() 처리기를 재 작성하는 경우 아래와 같이 :

$("button.clone").on("click", function(){ 
    //.clone() etc 
}); 

에 :

$(document).on("click", "button.clone", function(){ 
    //.clone() etc 
}); 

데모 바이올린 : 두 번째 예에서 http://jsfiddle.net/XcbsP/

, 나는 번호가 대신 HTML ID 년대를 교환 색인을 추적하는 데 도움이되는 색인 jQuery의 .attr()/.data(). 그래서 미래에 당신은 당신이 할 수있는, 요소를 다시 선택해야하는 경우도

$(".clonedInput[data-index='2']"); 

을 많은 새로운 클론을 만들 때 클릭 개체, 선행 증가 카운터 당신이 그것을 만들 때 :

/** 
* Where $(this).val() is the <option value="2"> 
**/ 
for(var x = 0; x < $(this).val(); x++) 
    $('body').append($(this).parents('.clonedInput') 
          .clone(true) 
          .attr('data-index', ++cloneIndex)); 

더 깨끗한 HTML을 만들고 id=""에 대한 의존성을 줄입니다. 특히 많은 것을 사용하고 있기 때문에 (.classes)

데모 바이올린 : http://jsfiddle.net/n6a7e/