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的click事件。是不是可以绑定到一个锚点ID，还是我在做一个菜鸟错误？

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

Answer 1

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

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

Answer 2

就像它一样，我猜...

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

Answer 3

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

你在jQuery中学到的第一件事就是在里面调用代码   $（document）.ready（）函数，所以一切都会尽快执行   DOM已加载。但是，在jQuery Mobile中，Ajax用于加载   导航时每个页面的内容都放入DOM中，并准备好DOM   处理程序仅对第一页执行。每当执行代码时   加载并创建新页面，您可以绑定到pageinit事件。   此事件在本页底部详细说明。

我试图使用document ready而不是pageinit进行绑定。第一个功能

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

移动到'pageinit'事件时

工作正常。但是，我仍然不确定为什么第二个代码示例有效，但不是第一个。

将JQuery Click事件附加到Anchor Id

3 个答案: