Javascript 将JQuery单击事件附加到锚定Id

我有一个简单的。为什么我不能将单击事件直接附加到锚点Id？我应该指出，我也在使用jquerymobile

            <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和bar提供了click事件。是不能绑定到锚Id还是我犯了新手错误

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

---

将该代码包装到文档

ready

中，如果没有任何其他脚本错误并且加载了jQuery，那么它应该可以工作

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

---

就像那样，我想它会起作用的

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

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

在jQuery中学习的第一件事是调用 $（document）.ready（）函数，以便在 DOM已加载。但是，在jQuery Mobile中，Ajax用于加载 导航时，将每个页面的内容导入DOM，并准备好DOM 处理程序仅对第一页执行。每当 加载并创建新页面后，可以绑定到pageinit事件。 本页底部详细解释了此事件

我试图使用documentready而不是pageinit进行绑定。第一个函数

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

---

移动到“pageinit”事件时工作正常。但是，我仍然不确定为什么第二个代码示例有效，而第一个代码示例无效。

第一个。执行代码时DOM准备好了吗？第一个确实有效，它是JQuery Mobile。页面没有加载到文档ready上的dom中我同意这样做是正确的，但是如果OP中的第二个示例起作用，那么一定是因为他已经在使用“就绪”处理程序或其他东西来确保dom就绪。由于jQuery 1.7，您应该使用

.on（event，handler）

而不是bind@Pointy; 我同意。我想可能还有其他一些脚本错误。或者另一种可能性是，他在1 mnt之后单击了第二个示例（当时DOM应该已经加载），然后匆忙地单击了第一个！它已经包装在文档中准备就绪。我认为问题可能出在jquerymobile上。我刚刚将绑定移到了“pageinit”事件，它就工作了。@CrimsonChin:你还没有在问题中提到它是jQuery Mobile anywhere！始终尝试使用适当的标签也。

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