将JQuery点击事件附加到锚点ID

Question

我有一个简单的 SO 问题。为什么不能直接将点击事件附加到锚点的ID上？我应该指出，我还在使用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-->

我正在尝试将点击事件附加到foo上。这样做是不生效的：

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

这个方法可以工作，但会给我同时绑定foo和bar的点击事件。难道不能只绑定一个锚点ID吗？还是我犯了新手错误？

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

- Jon Wells

---

第一个应该可以正常工作。当代码执行时，DOM是否已准备好？ - James Allardice

http://jsfiddle.net/cwyRb/ 第一个确实可以工作。 - Pointy

这是 JQuery Mobile。页面在文档准备就绪时没有加载到 DOM 中。 - Jon Wells

Answer 1

将该代码包裹在文档的 ready 中，如果您没有其他脚本错误并且已经加载了jQuery，则它应该可以正常工作。

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

- Shyju

---

我同意这是正确的做法，但如果OP中的第二个示例有效，则必须是他已经使用了“ready”处理程序或其他内容来确保DOM已准备就绪。 - Pointy

自从jQuery 1.7版本以后，你应该使用.on(event, handler)代替bind。 - Chris

@Pointy；我同意。我猜可能还有其他脚本错误。或者另一种可能是他在1分钟后（DOM应该已经加载完成），匆忙地点击了第一个示例，然后又点击了第二个示例！ - Shyju

它已经包含在文档准备好的状态中。我认为问题可能出在JQuery Mobile上。我只是将绑定移动到“pageinit”事件，然后它就可以工作了。 - Jon Wells

@CrimsonChin：你在问题中没有提到它是jQuery Mobile！请始终尝试使用正确的标签。 - Shyju

@Shyju 抱歉，我以为这是一个（我的）JQuery问题。你让我找对了方向。我会相应地调整问题。 - Jon Wells

Answer 2

我猜那样应该可以工作...

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

- Sergei Zahharenko

Answer 3

重要提示：使用$(document).bind('pageinit')，而不是$(document).ready()

在jQuery中，你学到的第一件事就是调用$(document).ready()函数内的代码，以便在DOM加载完成后立即执行所有内容。然而，在jQuery Mobile中，Ajax被用来将每个页面的内容加载到DOM中，当你导航时，DOM准备处理程序仅对第一个页面执行。为了在每次加载和创建新页面时执行代码，你可以绑定到pageinit事件。该事件在本页底部详细解释。

我试图使用文档准备代替pageinit进行绑定。第一个函数

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

当移动到“pageinit”事件时，它可以正常工作。然而，我仍然不确定为什么第二个代码示例可以工作，但第一个不能。

- Jon Wells