0

左の列にアイテムのリストがあり、クリックすると右の列のコンテンツが更新されます。これはうまくいきます。

問題は、右側のコンテンツにブートストラップ タブが読み込まれていることです。DOM がロードされた後にそれらが入ってくると、「show」イベントにアクセスできなくなります。私のコードは、タブが dom の残りの部分と同時に読み込まれるとうまく機能しますが、後で読み込まれると、読み込みが完了した後に追加されたため、イベントが利用できないと推測しています。

私はこれを修正する方法についてのアイデアを求めて、これらのフォーラムやネットの残りの部分に注いでいます。ロックスターの 1 人がこれに遭遇し、解決策を提供したと確信しています。

説明のために、私が動作させようとしているサンプルコードを次に示します。

<ul id="tabMenu" style="background: #D1D2D4;" class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#t-5">Content</a></li>
    <li><a data-toggle="tab" href="#t-9">Project</a></li>
    <li><a data-toggle="tab" href="#t-6">SEO</a></li>
    <li><a data-toggle="tab" href="#t-7">Image</a></li>
    <li><a data-toggle="tab" href="#t-10">Workflow</a></li>
</ul>


$('a[data-toggle="tab"]').on('show', function (e) {
     console.log(e.target); // activated tab
});

タブがページに読み込まれているときにこれを実行すると、うまく機能します。しかし、私がそれを実行し、これらが後でロードされると (前述の .load イベントのように)、show イベントが発生しないようです。

誰か教えてください: a.) 何か間違ったことをしている場合、それを修正するために何ができるか

b.) デリゲート (または他の方法) でこれを修正できるかどうかを教えてください。

コミュニティが提供できるあらゆる支援に感謝します。

4

2 に答える 2