Question

我有一个bootstrap-table，它在start时有一个不可见的列：data-visible =＆＃34; false＆＃34;。列标题包含一个显示模态帮助对话框的按钮：

<script>

    // This is repeated for each column that have help button, 
    // some are visible at the start and some not.
    $("#helpButtonColumnX").click(function(event) {
        event.stopPropagation(); // Prevent ordering by the field 
                                 // when the button is pressed.
        console.log("Hey"); // Do something
        $('#modalDialogColumnX').modal('show');
    });
</script>

问题是，当用户更改哪些列想要看到此功能丢失时。（console.log用于调试，并确认未调用该函数）。每列都有自己的按钮和模态，我以X为例。提前谢谢。

编辑：here a codeply

Answer 1

我对<div class="home"><a href="index.php?pagina=home"></a></div> <div class="events"><a href="index.php?pagina=events"></a></div> <div class="contact"><a href="index.php?pagina=contact"></a></div>知之甚少，有可能boostrap-table正在添加/删除html，这会导致表上的任何事件停止工作（因为html被添加到之后< / em>该事件已被连线）。

快速查看docs表示有boostrap-table个事件。

这为您提供了两个选项：

1通过添加onColumnSwitch事件的事件句柄重新添加点击处理程序，例如：

onColumnSwitch

2使用事件委托而不是直接连接事件，例如：

$("#table").on("column-switch.bs.table", function() { // this would be easier if you put it in a separate function // then you could call it from here and startup $("#helpButtonColumnX").click(function(event) { ... }); });

第二个选项可能是你最好的选择，但有（一些小的）性能问题（你可能不会注意到）。

Answer 2

我想知道这个解决方案对你有用吗？点击列标题中的select2框我遇到了类似的问题。 bootstrap-table作者提供了I posted here。

的解决方案

当bootstrap-table列列表显示更改时，不会执行JQuery代码

2 个答案: