jQuery replaceWith는 한 번만 작동합니다.

Question

한 요소를 다른 요소로 바꾸려고합니다. 한 번만 작동하고 다시 .two 요소를 클릭하려고하면 함수가 호출되지 않습니다.

이것은 코드이며 루프에 대한 django를 감싸고 있습니다. 그건 내가 $(this)를 사용해야하는 이유는 다음과 같습니다 새로운 .two가 동적으로 추가되기 때문에

<div class = "galery"> 

{% for image in images %} 

<img class = 'one' src = "http://www.fmscout.com/datas/avatars/48327-chelsea-logo.jpg"> 
<span class='glyphicon glyphicon-certificate two'></span> 

{% endfor %} 

</div> 

<script> 
$('.two').on('click', change_content); 

function change_content(){ 
    var one = $('.galery').find('.one') 
    $(this).replaceWith("<img class = 'one' src ='http://www.fmscout.com/datas/avatars/48327-chelsea-logo.jpg'>") 
    one.replaceWith("<span class='glyphicon glyphicon-certificate two'></span>") 
} 

</script> 

Answer 1

그것은,하지만 새가 존재하기 전에 클릭 핸들러는 이미 .two 된 div 기존에 부착되어 있습니다. 항상 존재할 요소에 핸들러를 연결 한 다음이를 사용하여 자식 요소에 대한 클릭을 처리해야합니다. 이를 이벤트 위임이라고합니다.

$('.galery').on('click', '.two', change_content); 

그래서, 모든 .galery 응답이 그 아이들에게 클릭 한 클릭의 대상이 on() 호출 (.two)의 선택과 일치하는 경우, 그것은 핸들러를 호출합니다 : jQuery를에서 다음과 같이 할 것 기능. 이 span에 첨부 할 때까지 모든 이벤트는 사용할 수 없습니다 있도록 .replaceWith()을 사용했습니다 때문에

Answer 2

, 클래스 two와 span는 DOM에 동적으로 추가되었습니다. , 셀렉터와 일치하는 모든 어린이를위한 실행됩니다

이벤트 대표단은 우리가 부모 요소에 하나의 이벤트 리스너를 첨부 할 수 있으며,이 경우

는, 당신은 event delegation를 사용할 수있다 자녀가 현재 존재하는지 또는 향후에 추가되는지 여부.

$('.galery').on('click', '.two', change_content);