jQuery jquery点击事件没有触发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5540561/
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
jquery click event not firing?
提问by Matt Elhotiby
I have this PAGEand I have if you scroll down the map to the li here is my code
我有这个页面，如果你将地图向下滚动到 li 这里是我的代码
HTML
HTML
<ul class="play_navigation">
<li class="active"><a class="barino_story_bottom" href="#">The Story</a></li>
<li><a class="barino_video_bottom" href="#">The Video</a></li>
<li><a class="barino_gallery_bottom" href="#">The Gallery</a></li>
<li><a class="barino_equipment_bottom" href="#">The Equipment</a></li>
</ul>
my jQuery
我的jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.play_navigation a').click(function(){
console.log("this is the click");
return false;
});
});
</script>
Nothing is happening at all if i click on the links....you can view source and see its there...but if i paste it in console it works fine...what gives
如果我点击链接，什么也没有发生......你可以查看源代码并在那里看到它......但是如果我将它粘贴到控制台它工作正常......什么给出
回答by Eli
Is this markup added to the DOM asynchronously? You will need to use livein that case:
这个标记是异步添加到 DOM 的吗？live在这种情况下，您将需要使用：
NOTE:.livehas been deprecated and removed in the latest versions of jQuery (for good reason). Please refer to the event delegation strategy below for usage and solution.
注意：.live在最新版本的 jQuery 中已被弃用和删除（有充分的理由）。使用方法和解决方法请参考下面的事件委托策略。
<script>
$(document).ready(function(){
$('.play_navigation a').live('click', function(){
console.log("this is the click");
return false;
});
});
</script>
The fact that you are able to re-run your script block and have it work tells me that for some reason the elements weren't available at the time of binding or the binding was removed at some point. If the elements weren't there at bind-time, you will need to use live(or event delegation, preferably). Otherwise, you need to check your code for something else that would be removing the binding.
您能够重新运行脚本块并使其工作这一事实告诉我，由于某种原因，元素在绑定时不可用，或者绑定在某些时候被删除。如果元素在绑定时不存在，您将需要使用live（或事件委托，最好）。否则，您需要检查您的代码是否有其他会删除绑定的内容。
Using jQuery 1.7 event delegation:
使用 jQuery 1.7 事件委托：
$(function () {
$('.play_navigation').on('click', 'a', function (e) {
console.log('this is the click');
e.preventDefault();
});
});
You can also delegate events up to the document if you feel that you would like to bind the event before the document is ready (note that this also causes jQuery to examine every click event to determine if the element matches the appropriate selector):
如果您想在文档准备好之前绑定事件，您还可以将事件委派给文档（请注意，这也会导致 jQuery 检查每个单击事件以确定元素是否与适当的选择器匹配）：
$(document).on('click', '.play_navigation a', function (e) {
console.log('this is the click');
e.preventDefault();
});
回答by Capsule
You need to prevent the default event (following the link), otherwise your link will load a new page:
您需要阻止默认事件（跟随链接），否则您的链接将加载一个新页面：
$(document).ready(function(){
$('.play_navigation a').click(function(e){
e.preventDefault();
console.log("this is the click");
});
});
As pointed out in comments, if your link has no href, then it's not a link, use something else.
正如评论中指出的那样，如果您的链接没有 href，那么它就不是链接，请使用其他内容。
Not working? Your code is A MESS! and ready() events everywhere... clean it, put all your scripts in ONE ready event and then try again, it will very likely sort things out.
不工作？你的代码一团糟！和 ready() 事件无处不在......清理它，将所有脚本放在一个就绪事件中，然后再试一次，它很可能会解决问题。
回答by guitarlass
I was wasting my time on this for hours. Fortunately, I found the solution. If you are using bootstrap admin templates (AdminLTE), this problem may show up. Thing is we have to use adminLTE framework plugins.
我在这上面浪费了几个小时的时间。幸运的是，我找到了解决方案。如果您使用的是引导管理模板 (AdminLTE)，则可能会出现此问题。问题是我们必须使用 adminLTE 框架插件。
example: ifCheckedevent:
示例：ifChecked事件：
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});
For more information click here.
如需更多信息，请单击此处。
Hope it helps you too.
希望对你也有帮助。
回答by Rayjax
Might be useful to some : check for
可能对某些人有用：检查
pointer-events: none;
In the CSS. It prevents clicks from being caught by JS. I think it's relevant because the CSS might be the last place you'd look into in this kind of situation.
在 CSS 中。它可以防止点击被 JS 捕获。我认为这是相关的，因为 CSS 可能是您在这种情况下最后考虑的地方。
