CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
j7nn7k
j7nn7k

Reputation: 18612

jQuery .bind() selector

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>

Upvotes: 0

Views: 771

Answers (2)

Erwin
Erwin

Reputation: 31

live is deprecated. Use on instead.

Upvotes: 3

jfriend00
jfriend00

Reputation: 708036

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", { });
    });
});

Upvotes: 1

Related Questions