操作方法replaceWithで複数の異なるjQuery段落

Question

テキストだけでクリックスルースライドショーに似たことを試みています。それは2番目のreplaceWithを通過していません。ここで私がこれまで持っているものです。

<p class="one">Number One</p> 

<script> 
$("p.one").click(function() { 
    $(this).replaceWith("<p class='two'>Number Two</p>"); 
}); 
</script>  

<script> 
$("p.two").click(function() { 
    $(this).replaceWith("<p class='three'>Number Three</p>"); 
}); 
</script> 

Answer 1

あなたはDOMがロードされた後、それが唯一の作成されてからp.twoイベントを委任する必要があります。ここで

$("body").on('click', 'p.two', function() { 
    $(this).replaceWith("<p class='three'>Number Three</p>"); 
}); 

はjsfiddleの実施例である： https://jsfiddle.net/m7k453bv/

- jQueryのに応じ

参考：

イベントの代表団はに、私たちは、単一のイベントリスナーを添付することができます 親要素。 セレクタに一致するすべての子孫に対して発生します。ダントが現在存在するか、が、 の将来に追加されます。です。

https://learn.jquery.com/events/event-delegation/

Answer 2

はdocument.ready機能のすべてを保持：

<script> 
$(document).ready(function(){ 

    $(document).on('click', "p.one", function() { 
     $(this).replaceWith("<p class='two'>Number Two</p>"); 
    }); 

    $(document).on('click', "p.two", function() { 
     $(this).replaceWith("<p class='three'>Number Three</p>"); 
    }); 
}); 
</script>