Jquery修改的选择器类没有被拾取

Jquery modified selector class not being picked up

本文关键字:修改 选择器 Jquery      更新时间:2023-09-26

我在构建一些jquery时遇到了麻烦,这些jquery捕获了一个在前一个事件之后被修改过的选择器

例如,我有一些html看起来像这样:

<div class='1'>test</div>

如果我用下面的命令点击它:

$(".1").click(function(){
    alert('found 1!'); 
    $(this).attr('class', '2');
});

警报工作,当我检查元素时,类已切换为'2'

现在,当我再次点击它时,使用以下命令:

$(".2").click(function(){
    alert('found 2!'); 
    $(this).attr('class', '1');
});

我还是被发现了!作为警告。

是什么我尝试不可能的原因,我做错了还是有更好的方法去做?谢谢!

您需要使用jquery .on()(或.delegate())函数来绑定动态更新元素的事件。

如下代码所示,

$(".1").on("click", function(){
    alert('found 1!'); 
    $(this).attr('class', '2');
});
$(".2").on("click",function(){
    alert('found 2!'); 
    $(this).attr('class', '1');
});

.click()仅在执行时绑定。您要查找的是。live()或。on()。我将使用jQuery 1.7的.on()语法:

$(document).on("click", ".1", function() {
  console.log('1 clicked');
  $(this).attr('class', '2');
});
$(document).on("click", ".2", function() {
  console.log('2 clicked');
  $(this).attr('class', '1');
});

当你这样做的时候:

$(".1").click(function()

您绑定到一个特定的DOM元素。一旦它被绑定,对象上的类就不再重要了。事件处理程序绑定到对象本身。jQuery执行该语句的方式是,它找到所有具有class="1"的DOM对象,并为它们设置一个事件侦听器。

如果你想要事件处理程序来处理页面的动态变化,那么你需要使用jQuery的.live().delegate() (jQuery 1.6或之前)或jQuery的.on() (jQuery 1.7+)。