0

小さくても厄介で奇妙な問題があります。クラスを ap 要素に追加するボタンが 2 つあります。ユーザーがボタンをクリックすると、クラス "groen" または "rood" (ボタンによって異なります) が p 要素に追加されます。次に、ユーザーはクラス「groen」または「rood」の p 要素をクリックすると、何かを実行する必要がありますが、何も実行されません。しかし、p 要素に HTML のクラス「groen」または「rood」を指定すると、jQuery アクションが実行されます。

ここに私のプロジェクトの jsFiddle があります: http://jsfiddle.net/c3dfj/

問題を確認したい場合は、「ja」または「nee」チェックボックスをクリックし、「akkoord」テキストを含む p 要素をチェックします。「akkoord groen」または「akkoord rood」を示します。(クリックしたボタンによって異なります)。しかし、「akoord」をクリックしても何も起こりません。クラス rood/groen を HTML に追加すると、動作します:/

<p class="akkoord"><br/>Akkoord</p>
4

4 に答える 4

2

クリック ハンドラーをバインドする場合、代わりにp「.rood」または「.groen」を使用する要素はありません。on

    $('body').on('click','.rood',function() {
        var container = $(this).parents('.container_vragen').find('.container2');
            container.fadeOut(400, function() {
               container
                   .css('overflow', 'hidden')
                   .appendTo("#niet_geregeld");
               $(this).parents('#niet_geregeld')
                   .find('.container2')
                   .css('padding-left', '30px')
                   .fadeIn(400);
            });
    });

    $('body').on('click','.groen',function() {
        var container = $(this).parents('.container_vragen').find('.container2');
            container.fadeOut(400, function() {
               container.css('overflow', 'hidden')
                        .appendTo("#geregeld");
               $(this).parents('#geregeld')
                      .find('.container2') 
                      .css('padding-left', '30px')
                      .fadeIn(400);
            });
    });

このようにして、ボタンが押された時点でそれぞれクラス「.rood」または「.groen」を持つすべての要素がクリックに反応します。もちろん、「body」セレクターを囲んでいる div などに絞り込むこともできますが、これは可能であれば推奨されますが、コードではすべての '.rood' 要素とすべての '.groon' 要素を選択しているため、単純にその I' との互換性を維持することができます。 「ボディ」を使用しました。また、不要な選択を排除するために、コードを少し単純化する自由も取りました

于 2012-12-06T11:39:54.353 に答える
0

メソッドにリダイレクトするか、関数を呼び出すよりもクラスがある場合は、jQuery .hasClass() を試してください。それ以外の場合は、関数 addClass() を適用します。

于 2012-12-06T11:37:07.050 に答える
0

HTML :

<div class="parent">
  <button class="addgroen">addgroen</button>
  <button class="addrood">addrood</button>
  <p>
  </p>
</div>

jQuery :

$('.addgroen').click(function(){
   $('p').removeClass('rood').addClass('groen');
})
$('.addrood').click(function(){
   $('p').removeClass('groen').addClass('rood');
})

jQuery < 1.7 では、以下を使用する必要があります。

$('.groen').live('click',function(){
   alert('p element with groen class clicked');
});
$('.rood').live('click',function(){
   alert('p element with rood class clicked');
});

jquery > 1.6 では、以下を使用する必要があります。

$('.parent').on('click','.groen',function(){
   alert('p element with groen class clicked');
});
$('.parent').on('click','.rood',function(){
   alert('p element with rood class clicked');
});
于 2012-12-06T11:42:51.030 に答える
0

If you are dynamically adding someting you should go for jQuery ON and OFF

Jquery ON

Jquery OFF

$(document).on('click','.rood',function() {
//YOUR CODE
});
于 2012-12-06T11:47:55.613 に答える