無法與課堂變化後的元素交互

Question

我確定這是處理javascript時的常見問題，但我似乎無法找到解決方案。

我試圖在「卡」上創建兩個函數，但是通過卡的狀態類來區分。

「啓動」卡和「刪除」卡的功能之一。但是當我啓動一張卡時，Im無法使用相同的功能將其刪除。

jsfiddle example

HTML

<div class="card started">click to hide</div> 
<div class="card not-started">click to start</div> 

JS

$(".card.not-started").on("click", function() { 
    $(this).removeClass("not-started").addClass("started").html("click to hide"); 
}); 

$('.card.started').on("click", function() { 
    $(this).fadeOut(); 
}); 

Answer 1

http://jsfiddle.net/wm99z4sj/1/

$(document).on("click", ".card.not-started", function() { 
    $(this).removeClass("not-started").addClass("started").html("click to  hide"); 
}); 

$(document).on("click",'.card.started', function() { 
    $(this).fadeOut(); 
}); 

試試吧。 如果您將該文檔用作父級，它將查找在運行時添加的該類的元素。

Answer 2

的輕微修改將解決這個問題。

$(".card").on("click", function() { 
    var el = $(this); 
    if (el.hasClass("not-started")){ 
     el.toggleClass("not-started started").html("click to hide"); 
    } else { 
     el.fadeOut(); 
    } 
}); 

這樣，你總是會委派一個單擊處理程序上.card但取決於你給它的類，它改變了功能。

DEMO

如果你想保持2個獨立的功能，你可以委託從$(document.body)或$(".card").parent()像這樣：

var parent = $(".card").parent(); 
parent.on("click", ".not-started", function() { 
    $(this).toggleClass("not-started started").html("click to hide"); 
}); 

parent.on("click", ".started", function(){ 
    $(this).fadeOut(); 
}); 

DEMO