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){ 
    // ... 
});