9

最初の .click 関数はコンテナに要素 (div) を追加するために使用され、2 番目の関数はコンテナから削除するために使用されます。コンテナーには、最初は要素がありません。クリックによる機能の削除が機能しない

$(document).ready(function(){
    $(".class1").click(function(){
       //Code for adding element to the container and 
       // removing class1 from it and adding class2

    });

    $(".class2").click(function(){
       alert("hi");   //Even the alert is not displayed
       $(this).fadeOut(100);    
    });
});

ただし、ページがコンテナーに読み込まれる前に要素が既に存在する場合は機能します。理由はありますか？document.ready 関数のせいでしょうか？ソリューション？

4

4 に答える 4

17

これは、要素のクリック ハンドラーを追加するときに、その特定の時点で.class2そのクラスを持つ要素にのみイベントを追加するためです。たとえば、なし。

代わりに、そのようにイベント委任を使用する必要があります。

$(document).on('click', '.class2', function () {
    alert('hi');
    $(this).fadeOut(100);
});

これは、イベント委任を使用documentして任意の要素のクリックをリッスンする (常に存在する)イベントをバインドするときに機能します。.class2詳細については、on()ドキュメントを参照してください。

于 2012-06-22T10:29:30.020 に答える
3

要素を変更した後は動的として扱われるため、両方のクラスにデリゲートイベントハンドラーを使用します（両方を切り替える場合、またはclass12番目のクラスに戻らない場合は十分です） 。class

$("#container").on("click", ".class1", function(){

});

$("#container").on("click", ".class2", function(){

});

ここで#containerはそれらのクラスの親を指しますが、他にもあるかもしれません。

于 2012-06-22T10:29:34.207 に答える
1

クリックするコードを追加しようとすると、.class2私が理解しているようにまだ作成されていません。.class2次のように要素を作成した後、クリック イベントを追加してみてください。

$(document).ready(function(){
    $(".class1").click(function(){
            //Code for adding element to the container and removing class1 from it and adding class2

        $(".class2").click(function(){
            alert("hi");         //Even the alert is not displayed
            $(this).fadeOut(100);

        });
    });
});
于 2012-06-22T10:29:28.723 に答える
0

関数が精緻化されるときに存在しない要素にイベントをキャストすることはできません。ただし、次のように、「class1」と「class2」の周りにラッパー要素 (div) を作成できます。

<div id="class1_wrapper">
  <span class="class1">
</div>

どの要素か分からないので、class1 に「span」を使用しました。次に、クリック イベントの代わりに、「on()」を使用できます。

 $("#class1_wrapper").on("click", ".class1", function ()
 {
   //Code for adding element to the container and removing class1 from it and adding class2
 });

この方法では、class1 が存在しなくても (class2 についても同じことができます)、クリック イベントが実行されます。

于 2012-06-22T10:33:27.900 に答える