更改的ID没有被jQuery找到

更多的概念证明，我想知道为什么这不起作用。我试图做的是使用jquery事件来更改ID属性，然后使用绑定到这个新更改的ID的另一个jquery事件。

例如：

<?php 
echo <<<END 
<html> 
<head> 
<style> 
#before { 
    color:maroon; 
} 
#after { 
    color:blue; 
} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<title>Test</title> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#before").hover(function() { 
     $(this).attr("id","after"); 
    }); 

    $("#after").click(function() { 
     alert("Handler for .click() called."); 
    }); 
}); 
</script> 
</head> 
<body> 
<p id="before">TEST TEXT</p> 
</body> 
</html> 
END; 
?>

悬停在我的测试文本，从栗色的颜色变为蓝色，符合市场预期。这是我的理解，文本现在将具有“后”的ID和点击事件处理函数单击时应用。但是，情况并非如此，快速事件处理程序及其关联的警报似乎不会触发。

我是新来的jquery有没有更新处理函数我忽略？

来源

2014-10-10 lowcrawler

你不能这样做后触发click事件，既然选择，只能判断在你的情况准备好了...你需要使用事件代表团...我也会推荐c挂一个类的属性，而不是更改ID – 2014-10-10 03:14:56

你是否暗示这会在document.ready之外工作？或者你是否有效地说，在其ID改变后不可能与元素进行交互？有没有办法强制更新DOM？ – lowcrawler 2014-10-10 03:17:30

将其标记为重复的，因为同样的概念也适用于此处...因为选择器在运行时期间发生更改 - http://jsfiddle.net/arunpjohny/6k2aemzu/1/ – 2014-10-10 03:18:09

它的工作原理与Event binding on dynamically created elements?相同。

将事件处理程序添加到使用选择器找到该元素的元素时，选择器仅在处理程序添加到元素后执行代码时执行一次。一旦发生变化，如果您更改与元素相关联的选择器值，它将不会反映在附加的处理程序中。

例如在你的情况下，你正在将一个处理程序添加到在dom就绪处理程序中使用ID为before的元素，因此一旦dom就绪事件被触发，你的选择程序将被评估，并返回一个单元素，处理程序。在相同的DOM准备好处理程序中，您正在尝试向ID为after的元素添加单击处理程序，但是在DOM准备好后，没有包含该ID的元素，因此处理程序未附加到任何元素。

现在在稍后您正在更改elemnet的id，但它不会影响已连接的处理程序，也不会添加新的处理程序。

这里的解决方案是使用一种称为event delegation的机制。

演示：

$(document).ready(function() { 
 
    //there is no need to use hover as your want to add the class when the mouse enter the element and you don't want to do anything in mouseleave 
 
    $("#mytarget").mouseenter(function() { 
 
    $(this).addClass("after").removeClass('before'); 
 
    }); 
 

 
    //look at the use of event delegation 
 
    $(document).on('click', '.after', function() { 
 
    alert("Handler for .click() called."); 
 
    }) 
 
});

.before { 
 
    color: maroon; 
 
} 
 
.after { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p id="mytarget" class="before">TEST TEXT</p>

来源

2014-10-10 03:27:46

我还想指出，似乎有更多的运行时友好的更改类的方法。例如，http://jsfiddle.net/arunpjohny/6k2aemzu/1/ – lowcrawler 2014-10-10 03:38:39

@lowcrawler正在更新一个演示....有一些额外的意见 – 2014-10-10 03:40:19

您可以悬停事件

$(document).ready(function(){ 
$("#before").hover(function() { 
    $(this).attr("id","after"); 
    $("#after").click(function() { 
    alert("Handler for .click() called."); 
}); 
    return false; 
}); 
});

来源

2014-10-10 03:40:44 wfy

你可能想提供一些解释，以清晰度OP ... – webeno 2014-10-10 04:28:51

更改的ID没有被jQuery找到

回答

相关问题