Javascript jQuery 类选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6594226/
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 Class selector not working
提问by dan
I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
当在 div 内单击具有特定类的锚标记时，我正在努力发出警报。
My html section in question looks like this...
我有问题的 html 部分看起来像这样......
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
jQuery部分如下..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this pagebut nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
我的问题是我无法让这个警报出现，我认为我正确地选择了“下一个”课程，但由于某种原因它不会选择它。我也尝试了此页面上的几乎所有内容，但没有任何效果。如果我不尝试指定锚标记，即 $('#foo').click(function()... 那么它可以工作，但是这个 div 中会有多个锚标记，所以只需在执行警报时执行单击 div 将无法满足我的需要。这个网站是一个使用 ajax 将信息发送到 do_search.php 的搜索引擎。在 do_search.php 中，我根据找到的结果数量做出分页决定，以及如果适用，可以建立并回显下一个、上一个、最后一个和第一个链接。
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.
编辑：我刚刚弄清楚，这是我对 .next 函数的放置，因为它不是在初始文档加载时创建的，而是在返回结果后，我将 .next 函数移到了成功部分ajax 函数，因为如果需要，按钮将在那里创建，现在它可以工作了。
回答by linkyndy
Try using the live()command:
尝试使用以下live()命令：
$(".bar").live("click", function(){ alert(); });
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
因为您是通过 AJAX 加载按钮的，所以单击事件并未绑定到它。如果您使用 live() 命令，它将自动将事件绑定到页面加载后创建的所有元素。
More details, here
更多细节，在这里
回答by Edgar Villegas Alvarado
You surely missed $(document).ready(). Your code should be:
你肯定错过了$(document).ready()。你的代码应该是：
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers
希望这可以帮助。干杯
回答by nwolybug
.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
.live 现在已弃用，是为此选择的答案。答案在上面所选答案的评论中。这是为我解决的解决方案：
$(document).on('click','.bar', function() { alert(); });
Thanks to @Blazemonger for the fix.
感谢@Blazemonger 的修复。
回答by mr_eclair
- Make sure you have included
JQuery Libraryproperly. - Make sure your script has written between
$(document).ready() in short $(function(){ });
- 确保您已
JQuery Library正确包含。 - 确保您的脚本已写入
$(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
演示：http: //jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});
