JQueryMobile buttons and clicking

Question

What is the correct way to bind a click / vclick event to a button in JQueryMobile?

I've tried using $().bind("click", function(){}); and $().on("click", function(){});but i never got a response from the console.

I have my buttons set up like this in my index.html:

EDIT

 <div data-role="page" data-title="OneStop Mobile" class="ui-responsive-panel" id="homepage">        
    <div data-role="panel" data-dismissable="false" id="optionsPanel">
        <div>
            <ul data-role="listview">
                <li> <a href="#" id="store">store</a>         </li>     
                <li> <a href="#" id="download">Download</a>   </li>
                <li> <a href="#" id="check">Check</a>         </li>
                <li> <a href="#" id="clear">Clear</a>         </li>
            <ul>      
        </div>
    </div>
</div>

and I'm binding it like this in my index.js:

$("#store").bind("click", function(event, ui) {
    console.log("WORK DAMNIT!")
});

This should work, according to the JQMobile api and demo pages, but i never see anything happen on my device or in a browser.

can u provide your html code and is this store static in html or are u generating it — Alok Agarwal, Aug 15 '13 at 15:51
it depends where you place your JS file/code. And do you bind events to static elements or dynamic ones. — Omar, Aug 15 '13 at 16:02
The JS code is in a folder called js, www/js/index.js, that part is working fine. The buttons are static. — Sidedcore, Aug 16 '13 at 10:31

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Your problem is that at the time you are binding your event the element that you are binding it to is not yet part of the DOM.

You need to either make sure that when you are binding the event the element is already part of the DOM by calling your function in the ready event or the pageinit of the JQM page, or you can use event delegation by calling the overloaded version of the .on function.

For example

Binding during the pageinit event (this also really uses event delegation to bind to the pageinit event).

//passing in the selector as the second parameter calls the overloaded version of .on
$(document).on('pageinit', '#myStorePage', function() {
   $("#store").bind("click", function(event, ui) {
      console.log("This should Work!")
   });
});

Using .on with event delegation

$(document).on('click', '#store', function() {
 console.log('This should Work!');
});

Note that the way event delegation works is binding the event to a existing higher level element and then when the event bubbles up checking for the selector. In general you will actually want to bind the event as close to the element that your checking for as possible, but you can go all the way up to the document if necessary.

As a side note as Omar mentioned using the first method I provided .bind would work as well as .on. However as of jQuery 1.7 .bind just delegates to .on which is to be preferred (.bind was left in for backwards compatibility)..

@Omar It does, but it just delegates to `.on` and according to the jQuery [documentation](http://api.jquery.com/bind/) .on is to be preferred with .bind really only remaining for backward compatibility. However since you mentioned it I'll incorporate that into my answer to make that more clear. — Jack, Aug 15 '13 at 16:03

Alok Agarwal · Answer 2 · 2013-08-15T16:05:21.960

0

$(document).on('click','#store', function(event) {
    alert("WORK DAMNIT!")
});

edited Aug 15 '13 at 16:05

answered Aug 15 '13 at 15:58

Alok Agarwal

3,071
3
23
33

@Omar can u please elavorate this jqm – Alok Agarwal Aug 15 '13 at 16:06
1

http://api.jquerymobile.com/pageinit/ "_We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system._" http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events – Omar Aug 15 '13 at 16:09
@Omar to be fair in this particular case `ready()` would work just as well, but you are right that `pageinit` is to be preferred which is why I didn't it as an example in my answer. – Jack Aug 15 '13 at 16:13
@Jack `.ready()` will definitely work, but its' functionality wouldn't fit jQM as it uses Ajax navigation. – Omar Aug 15 '13 at 16:16
@Omar True, for some reason I was thinking thinking that that this was a single page app, and that the button was the only thing added dynamically but that the page was part of the DOM (I realize that there isn't anything in the OP's question that indicates either way...). – Jack Aug 15 '13 at 16:21

JQueryMobile buttons and clicking

2 Answers2