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

snvhrwxg 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(157)

这是我的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代码，它改变了innerHTML：

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的事件不再起作用

twitter-bootstrap

来源：https://stackoverflow.com/questions/29505761/when-i-am-changing-the-innerhtml-bootstrap-tab-event-is-not-working-anymore

2条答案

按热度按时间

7lrncoxx1#

问题是，当您替换内部html时，绑定了事件处理程序的所有元素都将被破坏，并且创建了没有添加任何事件处理程序的新元素。
这种方法还存在其他问题，因为在这些元素上初始化的任何插件也会被破坏，因此这些插件也不会工作。
因此正确的解决方案是迭代每个目标元素，然后替换必要的内容。
至于单独考虑事件处理程序，您可以使用event delegation，但引导插件仍然可能无法工作，因为在新元素中插件尚未初始化。

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