javascript - Attach JQuery Click Event to Anchor Id - Stack Overflow

admin管理员组

文章数量:1291643

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);
        });

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);
        });

• javascript
• jquery
• jquery-mobile
• jquery-click-event

Share Improve this question Follow edited Jun 27, 2012 at 14:02 Jon Wells asked Jun 27, 2012 at 13:45 Jon WellsJon Wells 4,25999 gold badges4141 silver badges6969 bronze badges 3

• 1 The first one should work fine. Is the DOM ready when the code executes? – James Allardice Commented Jun 27, 2012 at 13:48
• 1 jsfiddle/cwyRb the first one does indeed work. – Pointy Commented Jun 27, 2012 at 13:49
• It was JQuery Mobile. The page isn't loaded into the dom on document ready – Jon Wells Commented Jun 27, 2012 at 13:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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);
});

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.

本文标签： javascriptAttach JQuery Click Event to Anchor IdStack Overflow