javascript 将 JQuery 点击事件附加到 Anchor Id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11227707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Attach JQuery Click Event to Anchor Id
提问by Jon Wells
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.
我有一个简单的 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-->
I am trying to attach a click event to foo. This doesn't work:
我正在尝试将点击事件附加到 foo。这不起作用：
$('#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?
这确实有效，但给了我 foo 和 bar 的点击事件。是否无法绑定到锚点 ID 或者我是否犯了菜鸟错误？
$('#foobarNavbar ul li a').bind('click', function(e)
{
e.preventDefault();
console.log("You clicked foo! good work");
console.log(e);
});
采纳答案by Jon Wells
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.
重要提示：使用 $(document).bind('pageinit')，而不是 $(document).ready()
您在 jQuery 中学习的第一件事是在 $(document).ready() 函数中调用代码，以便在加载 DOM 后立即执行所有内容。但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。此事件在本页底部有详细说明。
I was trying to bind using document ready instead of pageinit. The first function
我试图使用文档就绪而不是 pageinit 进行绑定。第一个功能
$('#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.
移动到“pageinit”事件时工作正常。但是，我仍然不确定为什么第二个代码示例有效但第一个无效。
回答by Shyju
Wrap that code in the document readyand it should work if you dont have any other script errors and you have jQuery loaded.
将该代码包装在文档中ready，如果您没有任何其他脚本错误并且加载了 jQuery，它应该可以工作。
$(function(){
$('#foo').click(function(e)
{
e.preventDefault();
console.log("You clicked foo! good work");
});
});
回答by Sergei Zahharenko
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);
});
