4

我有一个简单的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);
        });
4

3 回答 3

2

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

$(function(){
   $('#foo').click(function(e) 
   {   
      e.preventDefault();
      console.log("You clicked foo! good work");
   });
});
于 2012-06-27T13:49:24.030 回答
1

重要提示：使用 $(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”事件时工作正常。但是，我仍然不确定为什么第二个代码示例有效但第一个无效。

于 2012-06-27T14:01:01.080 回答
1

就像那样，我猜它会起作用......

$('#foobarNavbar').on('click','#foo', function(e) {   
   e.preventDefault();
   e.stopPropagation();
   console.log("You clicked foo! good work");
   console.log(e);
});
于 2012-06-27T13:54:04.263 回答