很难想出这个问题的标题。
更多的是为了概念验证,我想知道为什么这不起作用。我试图做的是使用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的新手,是否有一个我忽略的更新处理程序功能?
答案 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;
});
});