gpt4 book ai didi

javascript - jQuery 未找到已更改的 ID

转载 作者:太空宇宙 更新时间:2023-11-04 12:48:53 26 4
gpt4 key购买 nike

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

更多关于概念证明,我想知道为什么这不起作用。我正在尝试做的是使用 jquery 事件更改 ID 属性,然后使用另一个绑定(bind)到这个新更改的 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”,单击事件处理函数将在单击时应用。然而,情况并非如此,快速事件处理程序及其关联的警报似乎没有触发。

我是 jquery 的新手,是否有我忽略的更新处理函数?

最佳答案

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

当您将事件处理程序添加到使用选择器找到元素的元素时,选择器仅在处理程序添加到元素之后执行代码时执行一次。如果您更改与元素关联的选择器值,它不会反射(reflect)在附加的处理程序中,一旦发生这种情况。

例如,在您的情况下,您将 a 处理程序添加到 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>

关于javascript - jQuery 未找到已更改的 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26291389/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com