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 回答