更改了jQuery找不到的ID

很难想出这个问题的标题。

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

例如：

<?php echo <<<END    #before { color:maroon; } #after { color:blue; }     $(document).ready(function(){ $("#before").hover(function() { $(this).attr("id","after"); }); $( "#after" ).click(function() { alert( "Handler for .click() called." ); }); });    
TEST TEXT
   END; ?> 

将鼠标hover在我的测试文本上时，颜色会从栗色变为蓝色，如预期的那样。 我的理解是，文本现在具有“after”的ID，并且单击时将应用click事件处理函数。 但是，快速事件处理程序及其关联的警报似乎不会触发。

我是jquery的新手，或许有一个更新处理程序function，我忽略了？

Answer 1

它的工作原理与动态创建元素的事件绑定相同吗？ 。

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

例如，在你的情况下，你在dom ready处理程序中将一个处理程序添加到具有id的元素，因此一旦dom ready事件被触发，你的选择器就会被评估，并返回一个你要添加处理程序的元素。 在同一个dom ready处理程序中，您尝试向具有id的元素添加单击处理程序，但是在dom准备好时，没有具有该id的元素，因此处理程序不会附加到任何元素。

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

这里的解决方案是使用称为事件委托的机制。

---

演示：

 $(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; } 

  
TEST TEXT 

Answer 2

您可以在hover事件后触发click事件

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