All geek questions in one place

JQuery click event not firing in jQueryMobile

Using jQuery jquery-1.9.1.js and jQueryMobile 1.3.1 (Chrome 26 / Windows 7) I don’t see why one of these 'click' events related to C # one1 fires and the other does not:

HTML:

<div data-role="page" id="one" data-theme="a"> <div data-role="header" data-position="inline"> <h1>One</h1> </div> <div data-role="content" data-theme="a"> <a href="#" id="one1">[one]</a> <a href="#two">two</a> <a href="#three">three</a> </div> </div>

JavaScript:

 <script> $(document).on( "mobileinit", function() { $(document).on('click', '#one1', function(e){ console.log('firing'); }); $('#one1').on("click", function() { console.log('not firing'); }); }); </script>

When I run it in JSFiddle, both events fire when they are not wrapped in the "mobileinit" event: http://jsfiddle.net/9NRwa/

What am I missing here?

+6
source share
2 answers

Introduction

First of all, a mobileinit event should not be used to bind an event. Although it can be used as mobileinit was not created for this purpose. It was created to automatically initialize the jQuery Mobile parameter, so it should not be used to bind an event.

The right way is to use the correct page events, such as pageinit . For more information on page events, check out my other answer, which covers the various events of the jQuery Mobile page and how they differ from the regular jQuery document paradigm: jQuery Mobile: the document is ready for the event page .

Do not let me answer this question. Events such as clicks can be connected in several different ways. Let's look at the examples you used:

Different ways to bind events to jQuery

First example

 $(document).on('click', '#one1', function(e){ console.log('firing'); });

This first example is something new that was first used with the now obsolete live method. Basically, this is an event delegation mechanism that allows you to associate event handlers not only with all existing instances of a given node type, but also with any future instances of this node type (by type "I" means a set of DOM nodes mapped by this jQuery selector). Here I want to say that during an event related to the fact that this element should not exist in the DOM, this method basically works by attaching event handlers to the document itself and then responds to all events that bubble through the DOM. Therefore, it does not matter if element # one1 exists or not during event binding. You can create it dynamically later, and it will still work.

Second example

 $('#one1').on("click", function() { console.log('not firing'); });

This is an old way to bind an event. This requires the event to exist in the DOM before the event can be bound. In your case, you tried to bind this click event to an element that did not exist in the DOM at this point in time. It doesn’t matter, it was loaded after the binding process.

Working example

JsFiddle example: http://jsfiddle.net/Gajotres/QmNsa/

Take a look at this example. There you will see 5 different ways to bind the click event in jQuery Mobile:

  • The 2 click event is bound in HEAD before the page is initialized in the DOM
  • Two-click events are linked in HEAD in the pagebeforeshow event, basically this is also delegation of binding, because the event is bound when the page will be displayed and is already inside the DOM
  • The 1 click event is associated with BODY after the entire content of the page. Since all content is loaded inside the DOM, at this point this event will work.

HTML:

 <!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script> $(document).on('click', '#one1', function(e){ // This example will work because it was bind with event delegation process console.log('Firing 1'); }); $('#one1').on("click", function() { // This example will not work because event do not exist in this moment console.log('Not firing'); }); $(document).on( "pagebeforeshow", function() { // This example will work because it was bind with event delegation process $(document).on('click', '#one1', function(e){ console.log('Firing 2'); }); // This example will work because element exist in a DOM during the pagebeforeshow event $('#one1').on("click", function() { console.log('Firing 3'); }); }); </script> </head> <body> <div data-role="page" id="index"> <div data-theme="b" data-role="header"> <h1>Index page</h1> </div> <div data-role="content"> <a href="#" id="one1" data-role="button">[one]</a> </div> </div> <script> $('#one1').on("click", function() { // This example will work because we are binding it when element is already loaded into the DOM console.log('Firing 4'); }); </script> </body> </html>

Conclusion

  • Do not use the mobileinit event to bind the event, it will be fired before the page loads in the DOM, and only events related to delegation will work.
  • Link your events to the correct jQuery events mobile page.

Useful links on this topic:

+22
source

As docs pointed out:

Since the mobileinit event is fired immediately, you will need to bind an event handler before loading jQuery Mobile.

Your mobileinit event is mobileinit fired after jQuery Mobile has loaded, since jsFiddle will execute your javascript code after you finish loading any libraries you have selected in the sidebar. For this to work, your structure should look like this:

 <script src="jQuery library include first"></script> <script> $(document).on("mobileinit", function() { // Your code here }); </script> <script src="jQuery Mobile include last"></script>
0
source

Source: https://habr.com/ru/post/944281/

More articles:


All Articles