변경 후 JQuery onclick 바꾸기 div 내용이 작동하지 않습니다.

Question

사용자가 다음 버튼을 클릭하여 계속 더 많은 콘텐츠를보고 더 많은 콘텐츠를 계속 볼 수 있도록 반복 할 수있는 간단한 컨테이너를 만들려고합니다. . 나는 다음과 같이 설정 한 jQuery를 가지고, 첫 번째 세트는 완벽하게 작동하지만, 두 번째는하지 않습니다

$('#button').click(function(){ 
    $("#simon .1").replaceWith(function(){ 
     return $("<p class='3'>hello im info1</p>"); 
    }); 

    $("#button").replaceWith(function(){ 
     return $("<p id='button1'><a href='#'>button1</a> </p>"); 
    }); 
}); 

$('#button1').click(function(){ 
    $("#simon .3").replaceWith(function(){ 
     return $("<p class='3'> hello im info 2</p>"); 
    }); 

    $("#button1").replaceWith(function(){ 
     return $("<p id='button2'><a href='#'>button2</a> </p>"); 
    }); 
}); 

html로 :

<p class="1"> i am info 0 </p> 
<p id="button"><a href="#">button</a> </p> 

사전에 감사합니다!

Answer 1

당신은과 같이 이벤트를 위임해야합니다

$(document).on('click', '#button1', function(){ 
    $("#simon .3").replaceWith(function(){ 
     return $("<p class='3'> hello im info 2</p>"); 
    }); 

jsFiddle here.

이벤트 위임 here에 대해 자세히 알아보십시오.

Answer 2

당신은 새로 만든 버튼에 클릭 이벤트를 부착 여기 event delegation를 사용해야합니다 :

$(document).on('click','#button1', function() { 
    $("#simon .3").replaceWith(function(){ 
     return $("<p class='3'> hello im info 2</p>"); 
    }); 

    $("#button1").replaceWith(function(){ 
     return $("<p id='button2'><a href='#'>button2</a> </p>"); 
    }); 
}); 

사실, 우리가 훨씬 더 효율적에 바인드하는 것이기 때문에 처리를 위임 이벤트 여기 $(document)을 사용하지 말아야합니다 가장 가까운 부모는 동적이지 않고 단추의 부모 요소입니다.