如何使用replaceWith执行多个不同的jQuery段落

我正在尝试做一些类似于点击式幻灯片的事情，只显示文本。它没有通过第二次替换。以下是我目前掌握的情况：

<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>

第一名

$（“p.one”）。单击（函数（）{ $（this）.替换为（“

第二号”

”； }); $（“第二页”）。单击（函数（）{ $（此）。替换为（“

第三号”

”； });

---

将所有内容保存在文档中。就绪功能：

<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>

$（文档）.ready（函数（）{
$（文档）。在（'单击'，“p.one”，函数（）上{
$（this）.替换为（“
第二号”
”；
});
$（文档）。在（'单击'，“第二页”，函数（）上{
$（此）。替换为（“
第三号”
”；
});
});

您必须委派

p.two

事件，因为它仅在加载DOM后创建

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

$（“body”）。在（'click'，'p.two'，function（）上{
$（此）。替换为（“
第三号”
”；
});

下面是一个关于JSFIDLE的工作示例：

--

参考jQuery：

事件委派允许我们将单个事件侦听器附加到 父元素，该元素将为匹配 选择器，无论这些子体现在存在还是，都将添加到 未来

很高兴听到@DanielS:）如果没有其他问题，请将我的回答标记为已接受。欢迎来到SO，祝您在这里过得愉快。