jQuery找不到更改的ID [英] Changed ID not being found by jQuery
问题描述
很难想出这个问题的标题。
更多的概念证明，我想知道为什么这不行。我试图做的是使用一个jquery事件来更改ID属性，然后使用绑定到这个新更改的ID的另一个jquery事件。
例如：
<？php
echo<<< END
< html&
< head>
< style>
#before {
color：maroon;
}
#after {
color：blue;
}
< / style>
< script type =text / javascriptsrc =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
}）;
}）;
< / script>
< / head>
< body>
< p id =before> TEST TEXT< / p>
< / body>
< / html>
END;
？>
将鼠标悬停在测试文本上时，颜色从褐色变为蓝色。我的理解是，文本现在将有一个后的ID，点击事件处理函数将应用于点击。然而，这不是快速事件处理程序及其相关联的警报不会触发的情况。
我是新的jquery是有可能更新处理程序函数我可以使用与 / event-binding-on-dynamic-created-elements>动态创建的元素上的事件绑定？。
其中使用选择器找到元素，则在将处理程序添加到元素之后，在执行代码时，仅执行一次选择器。如果您更改与元素相关联的选择器值，将不会反映在附加的处理程序中。一旦发生，
例如，在您的情况下，您正在添加一个处理程序在dom ready处理程序中的之前的元素，因此一旦dom就绪事件被触发，你的选择器被评估，它返回一个单独的元素，你正在添加处理程序。在同一个dom就绪处理程序中，您尝试添加一个点击处理程序到 c>之后 c>之后的元素，但在dom准备好没有该id的元素，所以处理程序不是
现在，稍后您将更改elemnet的id，但它不会影响已经附加的处理程序，也不会添加新的处理程序。
这里的解决方案是使用一种称为事件代理。
演示：
.before {color：maroon;}。{color：blue ;}
< script src =https：// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script> ;<p id =mytargetclass =before> TEST TEXT< / p>
Tough to come up with the title for this question.
More for proof of concept, I'm wondering why this doesn't work. What I'm attempting to do is use a jquery event to change the ID attribute, then use another jquery event bound to this newly changed ID.
For example:
<?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;
?>
On hover over my test text, the color changes from maroon to blue, as expected. It is my understanding that the text would now have an ID of "after" and the click event handler function would apply when clicked. However that is not the case the quick event handler and its associated alert does not appear to trigger.
I am new to jquery is there perhaps an update handlers function I'm overlooking?
It works with the same principle as Event binding on dynamically created elements?.
When you add a event handler to an element where the element is found using a selector, the selector is executed only once when the code is executed after that the handler is added to the element. Once is has happend if you change the selector values associated with the element it will not reflect in the attached handlers.
For example in your case you are adding the a handler to the element with id before in dom ready handler, so once the dom ready event is fired your selector is evaluated and it returns a single element to which you are adding the handler. In the same dom ready handler you are trying to add a click handler to an element with id after, but at dom ready there are no elements with that id so that handler is not attached to any element.
Now at a later time you are changing the id of the elemnet, but it will not affect in the already attached handler nor will it add a new handler.
The solution here is to use a mechanism known as event delegation.
Demo:
$(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>
这篇关于jQuery找不到更改的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
