0

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?

lowcrawler
  • 4,717
  • 6
  • 28
  • 42
  • 1
    you can't do that since the selectors are evaluated only on dom ready in your case... you need to use event delegation... also I would recommend changing an attribute like class than changing the id – Arun P Johny Oct 10 '14 at 03:14
  • Are you suggesting that this would work outside the document.ready? Or are you effectively saying interacting with an element after its ID has changed is impossible? Is there a way to force an update of the DOM? – lowcrawler Oct 10 '14 at 03:17
  • 1
    marking it as duplicate since the same concept applies here also... since the selector changes during runtime - http://jsfiddle.net/arunpjohny/6k2aemzu/1/ – Arun P Johny Oct 10 '14 at 03:18
  • Seems reasonable. Good find - I searched and couldn't find anything definitive. If the "duplicate" question doesn't prove to be as helpful as I need it will at least help me formulate a new question. Thank you for your help. Your JSfiddle link shows exactly how to do it I want, if that were an answer I would market answered. Thank you again – lowcrawler Oct 10 '14 at 03:24

2 Answers2

1

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>
Community
  • 1
  • 1
Arun P Johny
  • 365,836
  • 60
  • 503
  • 504
  • I'd also like to point out there appears to be more runtime friendly methods of changing the classes. For example, http://jsfiddle.net/arunpjohny/6k2aemzu/1/ – lowcrawler Oct 10 '14 at 03:38
0

You can fire the click event after the hover event

$(document).ready(function(){
$("#before").hover(function() {
    $(this).attr("id","after");
    $( "#after" ).click(function() {
    alert( "Handler for .click() called." );
});
    return false;
}); 
});
wfy
  • 36
  • 5