1

ページに div 要素が動的に追加されるアプリケーションがあります。このページは、jQuery UI タブにも分割されています。

on() を使用して関数を作成しました。これは、クリックされた div に「選択済み」のクラスを適用し、ユーザーが選択した div で他の機能を実行できるようにします。

私のコードは最初のタブでは問題なく動作しますが、他のタブでは、div をクリックしたときに「選択済み」のクラスが適用されません。これがすべてのタブで機能するようにするには、どうすればよいですか?

これが私のコードです：

//Select an individual content element by clicking on it
$(function() {
    $(".tabcontent").on("click", "div", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});

タブの HTML は次のとおりです。

<div id="tabs">
  <ul>
    <li class="tab"><a href="#tab-1">Section 1</a></li>
    <li class="tab"><a href="#tab-2">Section 2</a></li>
    <li class="tab"><a href="#tab-3">Section 3</a></li>
 </ul>

 <div id="tab-1" class="tabcontent">
 Section Title:<input class="sectionTitle"></input></br>
 <div contenteditable="true">blah blah</div>
 </div>
  <div id="tab-2" class="tabcontent">
 Section Title:<input class="sectionTitle"></input>
 <div contenteditable="true">blah blah</div>
 </div>
  <div id="tab-3" class="tabcontent">
  Section Title:<input class="sectionTitle"></input>
  <div contenteditable="true">blah blah</div>
  </div>
</div>
4

4 に答える 4

0

このコードは、ページの読み込み後に動的に作成されたものを含むすべての tabcontent クラスで機能します

$(function() {
    $(document).on("click", ".tabcontent", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});
于 2013-09-09T13:09:00.613 に答える
0

次のコードを使用して試すことができます。

$(document).ready(function() {
    $(".tabcontent").on("click", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});
于 2013-09-09T13:16:45.610 に答える
0

これはうまくいくはずです：

$(function () {
    $('#tabs').tabs();
    $("#tabs").on("click", ".tabcontent", function (event) {
        //remove "selected" class from any element that has it
        $('.selected').removeClass("selected");
        //add "selected" class to the div that was clicked
        $(this).addClass("selected");
    });
});

特定の CSS を使用して動作することを示すフィドル: http://jsfiddle.net/du6M2/

注: 可能であれば、イベント マネージャーをドキュメントまたはウィンドウに追加しないようにします。特に大きなページや複雑なページでは、パフォーマンスの観点から、より近い要素 (親ラッパー) にフックすることが望ましいです。

于 2013-09-09T13:44:56.137 に答える