동적으로 생성 된 div에 JS를 적용 하시겠습니까?

Question

내 페이지에 여러 개의 div가 있으며 페이지에 동적으로 추가 할 수 있으며 제거 할 수도 있습니다. 페이지로드

는 동적으로 생성 된 div의는 uniqiue ID 년대와 사업부에 따라 일반적인 클래스와 localStorage에서로드, 나는 그와 함께 content()을 함수를 호출합니다.

기능 content()는 다음과 같습니다

function content(){ 
    alert("test"); 
    $(".two button").click(function(){ 
     var id = $(this).parent().attr("id"); 
     alert(id); 
    }); 
} 

은 매우 간단, 그것은이하는 모든 함수가 호출 될 "테스트", 경고이며 .two<button>을 클릭하면, 그것은 .two<textarea>.val()을 알려줍니다.

사업부의의가로드 된 후이 잘 작동하지만 내가 사업부의의를 복제 할 때 사업부의이

, 그것은 그들에게 고유 ID 이상과 같은 일반적인 클래스를 제공 복제 할 때 문제로 실행합니다. cloneDiv() 끝에서 content()으로 전화하여 내부 요소를 클릭하면 위와 같은 결과가 나타납니다.

문제는,이 함수는 화면에 DIV의의가있는만큼 여러 번 전화뿐만 아니라 DIV .two에 <button>에 클릭하면 .two<textarea>.val()세 번을 알려드립니다 것을 의미한다 얻을 것이다.

TLDR; .two에있는 버튼을 클릭하면 동적 div가 만들어지면 함수가 호출되기 때문에 div가 화면에 표시되는 횟수만큼 호출되지만 get은 한 번만 호출해야합니다.

이 모든 작업을 수행하는 데는 많은 코드가 있지만, 나는 분명히 어떤 일이 일어 났는지 설명했다고 생각합니다. 그러나 그것이 더 도움이된다면 나는 데모를 채찍질 할 것이다.

$('body').on('click', '.two button', function(){ 
    var id = $(this).parent().attr("id"); 
    alert(id); 
}); 

내가이 버튼의 실제 컨테이너에 그의 'body' 부분을 변경합니다 :

Answer 1

이 "이벤트 위임"을위한 것입니다. 당신은 문서 핸들러를 설정하고 핸들러가 연결된 후에는 생성되는 경우에도, 그 자손에서 이벤트를 처리합니다

$(document).on("click", ".two button", function(){ 
// put a click hander on the document to process clicks 
// from buttons that are descendants of elements with class=two 

Answer 2

당신은 .on 기능을 사용하고 싶습니다. 그래서 버튼 ID my-div와 콘텐츠 DIV 안에 항상 말, 당신은 할 수없는 것 :

$('#my-div').on('click', '.two button', function(){ 
    var id = $(this).parent().attr("id"); 
    alert(id); 
}); 

당신은 또한 한 번만 실행하려면이 코드가 필요 여러 번 호출되는 함수에 넣어 너무 필요를 . $(document).ready(....)에 넣으십시오.

바이올린은 : http://jsfiddle.net/gromer/dxbqz/

Answer 3

문제는 이것이다 : "cloneDiv()의 끝에서, I content()를 호출하면 내부 요소를 클릭하면 위와 같은 결과가 나타납니다. " 무슨 일이 일어나는가하면 기존 요소에 이벤트를 복합화시켜 너무 많은 콜백을 얻는 것입니다. 대신 .on 함수를 사용하고 한 번만 사용해야합니다..on 번을 여러 번 호출하면 여러 이벤트가 등록되므로 동일한 결과가 생성됩니다.

$(".two button").on("click",function(){ 
    var id = $(this).parent().attr("id"); 
    alert(id); 
}); 

는 수행이 한 번, 이후 추가 된 경우에도 그것에 응답 (".two button") 일치하는 모든 버튼.

또 다른 방법은 요소를 content() 호출에 전달한 다음 어쨌든 요소를 ​​만들 때이 함수를 호출하는 경우 해당 요소를 호출하는 것입니다.

function content(element){ 
$(element).click(function(){ 
    var id = $(this).parent().attr("id"); 
    alert(id); 
}); 
} 

부수적으로 경고를 사용하여 디버그하는 것은 프로그램 실행을 방해하므로 문제가 될 수 있습니다. 대신 console.log(id)을 사용하고 콘솔에서 테스트 변수를 검색하는 것이 좋습니다. console.trace()은 제 3 자 스크립트를 사용하고 어디에 무엇이 잘못되었는지 확인해야하는 경우에 유의해야 할 좋은 정보입니다.