这是我的 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>
这是我更改 innerHTML 的 javascript 代码:
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 时，您已绑定(bind)事件处理程序的所有元素都将被销毁，并创建新元素，其中没有添加任何事件处理程序。
这种方法还有其他问题，因为在这些元素上初始化的任何插件也会被销毁，因此它们也将无法工作。
因此正确的解决方案是遍历每个目标元素，然后替换必要的内容。
至于单独考虑事件处理程序，您可以使用event delegation , 但 Bootstrap 插件可能仍然无法工作，因为在新元素中插件未初始化。
document.body.innerHTML = document.body.innerHTML.replace(text1, text2);
$(document.body).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert('test');
});
关于javascript - 当我更改 innerHtml 时， Bootstrap 选项卡事件不再起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29505761/