Question

我正在为tab编写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){
  // ...
});

JQUERY：动态事件无法按预期工作

2 个答案: