更改了jQuery找不到的ID

时间:2014-10-10 03:14:07

标签: javascript jquery css

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

更多的是为了概念验证,我想知道为什么这不起作用。我试图做的是使用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为“after”,单击时将应用click事件处理函数。但是,快速事件处理程序及其关联的警报似乎不会触发。

我是jquery的新手,是否有一个我忽略的更新处理程序功能?

2 个答案:

答案 0 :(得分:1)

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

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

例如,在你的情况下,你是在dom ready处理程序中为一个id为before的元素添加一个处理程序,所以一旦dom ready事件被触发,你的选择器就会被评估,并返回一个你自己的元素正在添加处理程序。在同一个dom ready处理程序中,您尝试将一个单击处理程序添加到标识为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>

答案 1 :(得分:0)

您可以在悬停事件

后触发点击事件
$(document).ready(function(){
$("#before").hover(function() {
    $(this).attr("id","after");
    $( "#after" ).click(function() {
    alert( "Handler for .click() called." );
});
    return false;
}); 
});