問題的JavaScript - jQuery和選擇

Question

我有以下代碼：

<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上點擊它完美和變化該類（刪除未選中並添加活動），但是當我再次點擊它觸發未選中的功能，而不是活動功能。誰能告訴我發生了什麼事？

答： 正如費利克斯提出了下面的代碼工作：

$('#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(); 

})) 

Answer 1

當你的jQuery的運行將綁定行動的HTML標記。更改他們的類不會讓他們觸發不同的事件，因爲點擊回調已經被綁定。 您正在尋找的是綁定事件的「on」方法。

Live不會將事件綁定到標籤本身，而是綁定到文檔，並且無論何時單擊文檔時，它都會查看被點擊的內容是否與選擇器匹配。

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

基本上，而不是做這個

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

你會做到這一點

$('.investigated.active').on("click",function(){