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

When I am changing the innerHtml, bootstrap tab event is not working anymore

本文关键字：选项 事件 工作 不再 innerHtml      更新时间：2023-09-26

这是我的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>

这是我的javascript代码，它改变了内部HTML:

document.body.innerHTML = document.body.innerHTML.replace( text1, text2 );

这是我处理事件的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来处理替换：

$（document）.fund（'body'）.html（text）；

相关文章：