Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
140 views
in Technique[技术] by (71.8m points)

javascript - Changed ID not being found by jQuery

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...