jquery - JQUERY：动态事件未按预期工作

Question

我正在为标签编写 jquery 代码。但是我遇到了一个看起来很奇怪的麻烦。

据我所知， Function 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){
  // ...
});