Javascript 递归添加单击事件处理程序

我有一个元素

#standardBox

#standardBox.click-->将自身替换为#newBox

#newBox.click-->将自身替换为#standardBox

但是这个最新的

#standardBox

没有点击事件监听器。我希望它有一个点击事件监听器和随后创建的元素。这是一个递归循环，我不知道如何解决

我用它来表示标准内容的标题，它被一些中间/新内容所取代，这也是为了回到标准内容

谢谢

HTML

JAVASCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#standardBox').click(function(){
   $('#container').html('<div id="newBox"></div>');
   // register event handler for new element created
    $('#newBox').click(function(){
        $('#container').html('<div id="standardBox"></div>');
        // but this #standardBox has no click event listener
    });
});

$（“#标准框”）。单击（函数（）{
$（'#container'）.html（''）；
//为创建的新元素注册事件处理程序
$（'#newBox'）。单击（函数（）{
$（'#container'）.html（''）；
//但是这个#standardBox没有点击事件监听器
});
});

---

将处理程序连接到身体，如下所示：

$("body").on("click", "#standardBox", function(){
    $('#container').html('<div id="newBox"></div>');
})
.on("click", "#newBox", function(){
    $('#container').html('<div id="standardBox"></div>');
});

$（“body”）。在（“单击”，“标准框”，函数（）上）{
$（'#container'）.html（''）；
})
.on（“单击”、“#newBox”，函数（）{
$（'#container'）.html（''）；
});

---

这会导致主体侦听来自

#standardBox

和

#newBox

的事件。请注意，

此

变量仍然设置为

#standardBox

或

#newBox

元素。

使用下面的代码。使用“单击”功能动态创建的元素不会触发事件。您需要将处理程序附加到文档（正文）

$（文档）。在（'click'，'#standardBox'，函数（）上{
$（'#container'）.html（''）；
//为创建的新元素注册事件处理程序
});
$（文档）.on（'单击'，'新建框'，函数（））{
$（'#container'）.html（''）；
//但是这个#standardBox没有点击事件监听器
});

为什么要编写如此复杂的代码来实现这一点。因为可以有一个非常简单的代码

让我们这样说你的html

<div id="container">
   <div id="standardBox"></div>
</div>

---

为什么是

正文

？最接近的父级就足够了，这就是

#container

容器可能会在某个时候被删除并重新添加，因此这种情况下就可以解决了。但是是的，如果保证容器不会改变，请随意添加。这只是提供了更多的灵活性，但任何家长都可以。我如何将其转换为香草javascript？el.addEventListener（）不接受其他元素作为参数在

body

上打开addEventListener，然后检查事件对象中的原始元素。这与使用“tmp”变量相同，请使用stdBox设置tempBox、lah lah和tmpBox->newBox、lah lah，newBox->stdBox？这可能是另一个问题的正确答案。谢谢。@KayaToast:看来你在另一个链接上寻找解决方案：D:P

$("body").on("click", "#standardBox", function(){
    $('#container').html('<div id="newBox"></div>');
})
.on("click", "#newBox", function(){
    $('#container').html('<div id="standardBox"></div>');
});

 $(document).on('click','#standardBox',function(){
   $('#container').html('<div id="newBox"></div>');
   // register event handler for new element created
 });

 $(document).on('click','#newBox',function(){
       $('#container').html('<div id="standardBox"></div>');
    // but this #standardBox has no click event listener
 });

<div id="container">
   <div id="standardBox"></div>
</div>

$(function(){   
    $('#container div').click(function(){
       $(this).attr("id")=="standardBox"?$(this).attr("id","newBox"):$(this).attr("id","standardBox");
    });
});