JQUERY：動態事件不能按預期工作

Question

我正在編寫tab的jquery代碼。但我遇到了一個看起來很奇怪的麻煩。

據我所知，函數on（）動態綁定事件。 但是，在新追加[a href]之後，這不起作用。

希望有人幫助我解決問題，並感謝您查看我的問題。

這是我寫的代碼。

<script type="text/javascript">' 
$(document).ready(function() { 

$("#tab_pay a").on("click", function(event){ 

event.preventDefault(); 

var idx = $('#tab_pay li').index($(this).closest("li")); 

var spanText = $("#tab_pay .tab_ov").find("span").text(); 

//Removing class and replacing with <a> tag. 
$("#tab_pay .tab_ov").removeClass("tab_ov").find("span").replaceWith("<span><a href='#'>" + spanText + "</a></span>"); 

$(this).closest("ul").find("li:eq(" + idx + ")").addClass("tab_ov"); 

//Removing <a> 
var aText = $(this).text(); 
$(this).replaceWith(aText); 
}); 
}); 

<div id=tab_pay class="tab_pay"> 
<ul> 
<li class="tab_ov"><span>1</span></li> 
<li><span><a href="#">2</a></span></li> 
<li><span><a href="#">3</a></span></li> 
<li><span><a href="#">4</a></span></li> 
</ul> 
</div> 

Answer 1

的on調用動態綁定，但它呼籲對象是靜態的。

要在父綁定，而不是

$("#tab_pay").on("click", "a", function(event){ 
    ... 
}); 

Answer 2

綁定事件將不可能在.on改變或文檔，並使用您的選擇作爲第二個參數一些父元素：

$(document).on("click", "#tab_pay a", function(event){ 
    // ... 
});