Forums

Could someone try clicking on DIV2 multiple times. Why only first click affects DIV2. Am I doing it wrong. Thanks.
^^^^^^^^^^^^^^^^^^^^^^^^^^
<div id="div1">
DIV 1
<div id="div2">
DIV 2
</div>
</div>
<script>
YUI().use('node', function (Y) {
Y.one('#div1').on('click', function (ev) {
Y.log('==-IN div1');
Y.one('#div1').setHTML(addStars(Y.one('#div1')));
});
Y.one('#div2').on('click', function (ev) {
Y.log('==-IN div2');
Y.one('#div2').setHTML(addStars(Y.one('#div2')));
});
function addStars(node1){
Y.log('==-IN addStars');
return '***' + node1.getHTML();
}
});
</script>
^^^^^^^^^^^^^^^^^^^^^^^^^^

Juan is right. Y.one('#div2') resolves to the DOM element with that id at that very moment. When you set innerHTML (as setHTML does) on an element, that portion of the DOM tree is replaced with new elements parsed from the html string. When #div1's setHTML() is called, the #div2 element that you subscribed from is gone, and all event subscriptions with it.

Event subscriptions execute from the deepest nested element to the outermost containing DOM node (exception being capture mode, which on() doesn't use). So #div2's subscription will execute first, then #div1's.

To avoid removing event subscriptions when element content is replaced, use event delegation. http://yuilibrary.com/yui/docs/event/delegation.html

HTH