Search jQuery

jQuery Forum

What is the best way to bind click events?

in jQuery Mobile • 7 years ago

Hello. I'm an 'experienced' HTML5/CSS3/JavaScript Front-End developer and this is my first time using a framework that employs a dynamic DOM instead of loading pages, and I've come to the question:

What is the best way, considering how jQ Mobile handles its dynamic DOM, to bind click events?

So far I have tried 3 methods that work, but I do not know which is the preferred one:

<div data-role="page">
.....
.....
<script type="text/javascript">
$("#mydiv").click(function() { ... });
</script>
</div>

$(":mobile-pagecontainer").on( "pagecontainerchange", function( event, ui ) {
if( $(":mobile-pagecontainer").activepage().attr("id") == "myPage) {
//Unbind any previous events just in case this element was already in the DOM.
$("#mydiv").unbind();
$("#mydiv").click(function() { ... });
}
} );

<div data-role="page">
<div id="mydiv" onclick="myAction()">
....
</div>
</div>

Which one is the best way, or is there a better way than the ones I have used?

Replies(4)

jakecigar

Re: What is the best way to bind click events?

7 years ago

$(document).on("click","#mydiv",function() { ... });

Is yet another way. You don't have to worry about any JQM events. It just goes it the <head>.

JΛ̊KE

Chris1111..

Re: What is the best way to bind click events?

7 years ago

So if I put that in the head (or in a script file referenced in the head) I won't have to worry if the element is or not in the DOM, it will always work when it gets added sooner or later?

jakecigar