jQuery .bind() selector

Question

I'm trying to bind a click event to an anchor and I can't figure out the right selector... Is bind() particularly picky with selectors?

Here's my code which does not work:

$(".ui-navbar").delegate("a.location-menu-btn", "click", function() {
    navigateToPage("location.html", { });
});

The following code does work but causes the whole body to appear like it is being clicked on an Android smartphone (ugly yellow box around the anachor).

$("body").delegate("a.location-menu-btn", "click", function() {
    navigateToPage("location.html", { });
});

This is the html:

<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
                        <ul class="ui-grid-b">
                            <li class="ui-block-a">
                                <a href="javascript:void(0)" data-ajax="false" class="search-menu-btn ui-btn ui-btn-up-a" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-search">Search</span></span></span></a>
                            </li>
                            <li class="ui-block-b">
                                <a href="javascript:void(0)" data-ajax="false" class="location-menu-btn ui-btn ui-btn-up-a" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-location">Location</span></span></span></a>
                            </li>
                            <li class="ui-block-c">
                                <a href="javascript:void(0)" data-ajax="false" class="settings-menu-btn ui-btn ui-btn-up-a" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-settings">Settings</span></span></span></a>
                            </li>
                        </ul>
                    </div>

I haven't actually used `delegate` much myself, but isn't `$("body").delegate("a.location-menu-btn", 'click'...)` the same as `$("a.location-menu-btn").live('click'...)` ? — nickf, Sep 21 '11 at 00:10
@nickf - Close, but not the same. `$("a.location-menu-btn").live...` wil first traverse the DOM for all elements matching `a.location-menu-btn`, but will then do nothing with that matched set. It'll just use the selector for `live`. When using `delegate`, the DOM is never traversed. It'll simply try to match the selector when clicked. As you can see, `delegate` is more efficient than `live`. For more info, take a look at my answer here: http://stackoverflow.com/questions/7433051/jquery-disadvantages-of-consistently-using-live/7433091#7433091 — Joseph Silber, Sep 21 '11 at 00:13
I guess your code is executing before page or jQuery is loaded. Try putting it inside `$(function(){ ... });` — NiematojakTomasz, Sep 21 '11 at 00:15
There is no such thing as a "bind selector". A selector returns a list of elements (the list may be empty). What you do with the list has nothing to do with the selector used to create the list. — Steve Wellens, Sep 21 '11 at 00:46

score 3 · Answer 1 · edited Nov 12 '12 at 15:19

3

live is deprecated. Use on instead.

edited Nov 12 '12 at 15:19

John Conde

217,595
99
455
496

answered Nov 12 '12 at 15:03

Erwin

31
2

score 1 · Accepted Answer · answered Sep 21 '11 at 00:53

If you want to have a click event on the anchor elements in .ui-navbar and the HTML is static HTML that exists at page load time, then you can just use this:

$(document).ready(function() {
    $(".ui-navbar a").click(function() {
        navigateToPage("location.html", { });
    });
});

That will make the <a> tags in that piece of your HTML clickable. But, those <a> tags have no content to them and thus no size so nobody will be able to click on them until you give them some content.

If your problem is something different than this, please explain.

If the content is added dynamically via script, then you can use .live() like this:

$(document).ready(function() {
    $(".ui-navbar a").live("click", function() {
        navigateToPage("location.html", { });
    });
});

jQuery .bind() selector

2 Answers2