Javascript 奇怪的虫子当；innerHTML"；是用。。？_Javascript_Html_Jquery_Css_Innerhtml

Javascript 奇怪的虫子当；innerHTML"；是用。。？

javascript html jquery css

Javascript 奇怪的虫子当；innerHTML"；是用。。？,javascript,html,jquery,css,innerhtml,Javascript,Html,Jquery,Css,Innerhtml,我发现了一个我无法理解的奇怪错误。有人能解释一下为什么下面的代码不起作用吗？当我将按钮2放入中时，按钮2停止工作按钮1 按钮2 //全局变量 var content=document.getElementById（'test'）； $（文档）.ready（函数（）{ $（'#button1'）。在（'click'，function（）上{ content.innerHTML+=“”； }); }); $（文档）.ready（函数（）{ $（'#button2'）。在（'click'，func

我发现了一个我无法理解的奇怪错误。有人能解释一下为什么下面的代码不起作用吗？当我将按钮2放入

中时，按钮2停止工作


按钮1
按钮2
//全局变量
var content=document.getElementById（'test'）；
$（文档）.ready（函数（）{
$（'#button1'）。在（'click'，function（）上{
content.innerHTML+=“”；
});
});
$（文档）.ready（函数（）{
$（'#button2'）。在（'click'，function（）上{
content.innerHTML+=“测试”；
});
});

更改元素时，“事件”不再有效。从上部元素馈送以保持在“事件”中

由于您替换了button元素，那么事件处理程序不再appliesHave进行检查，但据我回忆，基本上，

+='
'

意味着您将innerHTML设置为当前的innerHTML值，再加上新的hr标记。这将删除任何事件侦听器。而是在该文档中。ready调用（您不需要2个）执行

$（“#test”）。在（'click'，“#button2'，function（）{…}）

尝试

$（content）。改为追加（'test'）

。将保持所有其他元素的原始状态，而不会删除事件监听器因为您替换了button元素，那么事件处理程序就不再应用程序了，但据我回忆，基本上，

+='
'

意味着您将innerHTML设置为当前的innerHTML值，再加上新的hr标记。这将删除任何事件侦听器。而是在该文档中。ready调用（您不需要2个）执行

$（“#test”）。在（'click'，“#button2'，function（）{…}）

尝试

$（content）。改为追加（'test'）

。将保持所有其他元素为原始元素，而不删除事件侦听器

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<button id='button1'>Button1</button>


<div id='test'>
    <button id='button2'>Button2</button>
</div>

<script>
//Global var
var content = document.getElementById('test');

$(document).ready(function(){
    $('#button1').on('click', function(){
        content.innerHTML += '<hr>';
    });
});

$(document).ready(function(){
    $('#button2').on('click', function(){
        content.innerHTML += ' Test';
    });
});

</script>
</body>
</html>

 $('#button2').on('click', function(){

 replace width:

 $('body').on('click', '#button2', function () {