CODEWITHSUNDEEP
javascriptjqueryjquery-mobilejquery-click-event
Jon Wells
Jon Wells

Reputation: 4259

Attach JQuery Click Event to Anchor Id

I have an easy one SO. Why cant I attach a click event straight to an anchors Id? I should have pointed out that I am also using JQuery Mobile.

            <div id="foobarNavbar" data-role="navbar" style="display:none;">
                <ul>
                    <li><a id="foo" href="#foo" data-icon="plus">New Event</a></li>
                    <li><a id="bar" href="#bar" data-icon="grid">Events</a></li>
                </ul>
            </div><!-- /foobarNavbar-->

I am trying to attach a click event to foo. This doesn't work:

        $('#foo').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
        });

This does work but gives me the click event for both foo and bar. Is it not possible to bind to an anchor Id or am I making a rookie error?

        $('#foobarNavbar ul li a').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
            console.log(e);
        });

Upvotes: 4

Views: 18363

Answers (3)

Jon Wells
Jon Wells

Reputation: 4259

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

I was trying to bind using document ready instead of pageinit. The first function 

$('#foo').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
        });

works fine when moved to the 'pageinit' event. I am still not sure, however, why the second code example worked but not the first.

Upvotes: 1

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

Like that it will work i guess...

$('#foobarNavbar').on('click','#foo', function(e) {   
   e.preventDefault();
   e.stopPropagation();
   console.log("You clicked foo! good work");
   console.log(e);
});

Upvotes: 1

Shyju
Shyju

Reputation: 218852

Wrap that code in the document ready and it should work if you dont have any other script errors and you have jQuery loaded.

$(function(){
   $('#foo').click(function(e) 
   {   
      e.preventDefault();
      console.log("You clicked foo! good work");
   });
});

Upvotes: 2

Related Questions