0

開始時に非表示の列があるブートストラップ テーブルがあります: data-visible="false"。列のキャプションには、モーダル ヘルプ ダイアログを表示するためのボタンが含まれています。

<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 を付けます。前もって感謝します。

編集：ここでコードプライ

4

2 に答える 2

0

について十分に知りませboostrap-tableん。boostrap-table が html を追加/削除している可能性があり、テーブル上のイベントが機能しなくなる可能性があります (イベントが配線された後に html が追加されるため)。

ドキュメントをざっと見ると、onColumnSwitchイベント があることがわかります。

これにより、次の 2 つのオプションが提供されます。

1 イベントのイベント ハンドルを追加して、クリック ハンドラを再度追加しますonColumnSwitch。たとえば、次のようになります。

$("#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) {
     ...
     });
});

2 イベントを直接接続するのではなく、イベント委任を使用します。例:

$("document").on("click", "#helpButtonColumnX", function() {
    ...
});

2 番目のオプションが最善の策かもしれませんが、(いくつかのマイナーな) パフォーマンスの問題があります (おそらく気付かないでしょう)。

于 2015-08-28T20:23:58.350 に答える
0

この解決策があなたに役立つかどうか疑問に思いますか？列ヘッダーのselect2ボックスをクリックすると、同様の問題が発生しました。ブートストラップ テーブルの作成者は、私がここに投稿したソリューションを提供しました。

于 2015-08-30T03:09:52.640 に答える