0

私は次のコードを持っています:

 <div id="imgThumb">
        <img id="t1" src="images/cards/1.png" style="display:none; "/><img id="t13" src="images/cards/13.png" style="display:none; "/>img id="t15" src="images/cards/15.png" style="display:none; "/><img id="t16" src="images/cards/16.png" style="display:none; "/>            
    </div>
    <div id="cardHolder" class="rounded-border">
        <div class="title"></div>
        <div id="cardsInvestigated"><h1>In hand</h1>
            <div value="t1" class="impar tecnologia unselected investigated">Adrenalina GreenDragonFly</div><div value="t15" class="impar tecnologia unselected investigated">Diplomatico Wissenland</div>            </div>
        <div id="cardsNotInvestigated"><h1>Not investigated</h1>
            <div value="t13" class="par tecnologia unselected notinvestigated">Centinela Saisei</div><div value="t16" class="par tecnologia unselected notinvestigated">Emboscada Arthuria</div>
        </div>
    </div>

それから私は次のJavaScriptを持っています:

    $('.investigated.active').click(function(){
    //jugar tarjeta
    alert ('jugar');
})

$('.notinvestigated.active').click(function(){
    //investigar tarjeta
    alert ('investigar');
})


$(".unselected").click(function (){
    alert('click on unselected')
    $('#'+$('.active').attr('value')).toggle();
    $('.active').removeClass('active').addClass('unselected');
    //$(this).addClass('active');
    $(this).removeClass('unselected').addClass('active');
    $('#message div:last-child').remove();
    $('#message').append('<div id="message1">Has seleccionado la tarjeta '+$(this).text()+'</div>');
    $('#'+$(this).attr('value')).toggle();

})

今、divをクリックすると完全に機能し、クラスが変更されます（選択されていないものを削除してアクティブに追加されます）が、もう一度クリックすると、アクティブな関数ではなく選択されていない関数がトリガーされます。誰が何が起こっているのか教えてもらえますか?

回答: Felix が提案したように、次のコードが機能します。

    $('#cardHolder').on('click','.investigated.active',(function(){
    alert ('jugar');
}))

$('#cardHolder').on('click','.notinvestigated.active',(function(){
    //investigar tarjeta
    alert ('investigar');
}))


$("#cardHolder").on("click",'.unselected',(function(){
    alert('click on unselected')
    $('#'+$('.active').attr('value')).toggle();
    $('.active').removeClass('active').addClass('unselected');
    //$(this).addClass('active');
    $(this).removeClass('unselected').addClass('active');
    $('#message div:last-child').remove();
    $('#message').append('<div id="message1">Has seleccionado la tarjeta '+$(this).text()+'</div>');
    $('#'+$(this).attr('value')).toggle();

}))
4

1 に答える 1

2

jquery を実行すると、アクションが html タグにバインドされます。クリック コールバックが既にバインドされているため、クラスを変更しても別のイベントがトリガーされることはありません。あなたが探しているのは、イベントをバインドするための「on」メソッドです。

Live はイベントをタグ自体にバインドするのではなく、ドキュメントにバインドします。ドキュメントがクリックされるたびに、クリックされたものがセレクターと一致するかどうかを確認します。

http://api.jquery.com/on/

基本的に、これを行う代わりに

$('.investigated.active').click(function(){

あなたはこれをします

$('.investigated.active').on("click",function(){
于 2012-05-15T18:19:30.063 に答える