Javascript 当我更改innerHtml时，引导选项卡事件不再工作

这是我的HTML代码：

<ul class="nav nav-tabs">
    <li class="active"><a href="#menu1" data-toggle="tab">menu1</a></li>
    <li><a href="#menu2" data-toggle="tab">menu2</a></li>
</ul>

这是我处理事件的jquery代码：

$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) { 
    alert('test');
}); 

---

当用于更改innerHTML的java代码运行时，tab事件不再工作

问题在于，当您替换内部html时，所有绑定了事件处理程序的元素都将被销毁，并且创建了没有添加任何事件处理程序的新元素

这种方法还存在进一步的问题，因为在这些元素上初始化的任何插件也会被销毁，所以这些插件也不会工作

因此，正确的解决方案是迭代每个目标元素，然后替换必要的内容

如果只考虑事件处理程序，您可以使用，但是引导程序插件可能无法工作，因为在新元素中插件没有初始化

document.body.innerHTML = document.body.innerHTML.replace(text1, text2);
$(document.body).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert('test');
});

---

使用Jquery来处理替换：

---

$（文档）.find（'body'）.html（文本）

你想替换什么？

document.body.innerHTML = document.body.innerHTML.replace(text1, text2);
$(document.body).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert('test');
});