jQuery를 사용하여 동적으로 버튼 추가

버튼을 동적으로 추가하려고합니다. 첫 번째 버튼은 작동하지만 다른 것은 작동하지 않습니다. 이전에 live 함수를 사용했지만 jQuery 1.9.1이이 함수를 제거했습니다. 새로 추가 된 버튼을 작동 시키려면 어떻게해야합니까?jQuery를 사용하여 동적으로 버튼 추가

HTML 코드 :

<div class="take"> 
    <p>this is the para</p> 
    <button class="test">copy</button> 
</div>

jQuery를 코드 : 여기

$('.test').on('click', function() { 
    var a = $(this).parent(); 
    new.clone().insertAfter(a); 
})

는 jsfiddle입니다. 문제를 해결할 복제에 진정한 전달

출처

2013-04-09 Selvamani

가장 많이 묻는 질문은 여기에 있습니다. '.on()'메소드에 대해 DOCS를 읽었습니까? 그것은 모두 거기에있다! –

'.on()'을 사용하는 새로운 방법은 –

위임을하기위한 가장 좋은 방법 인'.on()'을 사용하십시오. – jmar777

-jsfiddle

$('.test').on('click', function() { 
    var o = $(this).parent(); 
    o.clone(true).insertAfter(o);   
})

참고 : new 자바 스크립트의 키워드는 그래서 변수로 사용하지 않는 것입니다.

출처

2013-04-09 14:55:49 Anoop

컨텍스트를 제공하기 위해'.clone()'에 true를 전달하면 이벤트가있는 전체 복사본이됩니다. 이것이 다시 추가하는 이유입니다. (실제로'.on()'을 정확하게 사용하는 것은 아닙니다.) –

차이점으로 OPs 바이올린을 업데이트했습니다. http://jsfiddle.net/vJZmj/10/ –

당신은 .on() (demo)를 사용하려면 :

http://jsfiddle.net/uk6Bh/1/

시각화하기

$(document).on('click', '.test', function() { 
    var o = $(this).parent(); 
    o.clone().insertAfter(o); 
})

출처

2013-04-09 14:57:06 jmar777

더 가까운 정적 부모를 찾을 수 있다면 문서까지 이동하는 이유는 무엇입니까? 그게 아니야? –

여전히 매우 저렴합니다 (클릭 이벤트는 거의 발생하지 않으며 버블 링이 빠름). 또한, 대답에 통합하기 위해 DOM 트리 위로 올라가는 마크 업이 제공되지 않았습니다. – jmar777

$(document).on('click', '.test', function() { 
    var o = $(this).parent(); 
    o.clone().insertAfter(o); 
});

대신 document 사용보다는 비 동적 부모 ID 선택 :

$('#non-dynamic-parent').on('event', '.dynamic-delegated-element', function() {

http://api.jquery.com/on/는 말한다 :

위임 된 사건들이 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수있는 장점이 있습니다. 위임 된 이벤트 핸들러가 연결될 때 존재하도록 보장 된 요소를 선택하면 위임 된 이벤트를 사용하여 이벤트 핸들러를 자주 연결하고 제거 할 필요가 없습니다. 이 요소는 예를 들어 Model-View-Controller 디자인의 뷰 컨테이너 요소이거나 이벤트 처리기가 문서의 모든 버블 링 이벤트를 모니터링하려는 경우 문서 일 수 있습니다. 문서 요소는 다른 HTML을로드하기 전에 문서 머리글에서 사용할 수 있으므로 문서가 준비 될 때까지 기다리지 않고도 이벤트를 첨부 할 수 있습니다.

출처

2013-04-09 14:58:18

jQuery를 사용하여 동적으로 버튼 추가

답변

관련 문제