的onclick jQuery的更換格內容的變更

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)這裏委託的事件處理，因爲它是更有效地將它們綁定到這不是動態的，其最接近的父母是你的按鈕的父元素。