jQuery 添加类后jQuery单击事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16893043/
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 working after adding class
提问by Shiju K Babu
In my JSP page I added some links:
在我的 JSP 页面中，我添加了一些链接：
<a class="applicationdata" href="#" id="1">Organization Data</a>
<a class="applicationdata" href="#" id="2">Business Units</a>
<a class="applicationdata" href="#" id="6">Applications</a>
<a class="applicationdata" href="#" id="15">Data Entity</a>
It has a jQuery function registered for the click event:
它有一个为点击事件注册的 jQuery 函数：
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick");
$('#gentab a').attr('href', '#datacollector');
});
It will add a class, tabclickto <a>which is inside <li>with id="gentab". It is working fine. Here is my code for the <li>:
这将增加一类，tabclick到<a>这里面<li>有id="gentab"。它工作正常。这是我的代码<li>：
<li id="applndata"><a class="tabclick" href="#appdata" target="main">Application Data</a></li>
<li id="gentab"><a href="#datacollector" target="main">General</a></li>
Now I have a jQuery click handler for these links
现在我有这些链接的 jQuery 单击处理程序
$("a.tabclick").click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
For the first link it is working fine. It is alerting the <li>id. But for the second <li>, where the class="tabclick"is been added by first jQuery is not working.
对于第一个链接，它工作正常。它正在提醒<li>ID。但是对于第二个<li>，class="tabclick"第一个 jQuery 添加的位置不起作用。
I tried $("a.tabclick").live("click", function(), but then the first link click event was also not working.
我试过了$("a.tabclick").live("click", function()，但是第一个链接点击事件也不起作用。
回答by Arun P Johny
Since the classis added dynamically, you need to use event delegation to register the event handler
由于class是动态添加的，所以需要使用事件委托来注册事件处理程序
$(document).on('click', "a.tabclick", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
回答by pala?н
You should use the following:
您应该使用以下内容：
$('#gentab').on('click', 'a.tabclick', function(event) {
event.preventDefault();
var liId = $(this).closest("li").attr("id");
alert(liId);
});
This will attach your event to any anchors within the #gentabelement,
reducing the scope of having to check the whole documentelement tree and increasing efficiency.
这会将您的事件附加到#gentab元素内的任何锚点，从而减少必须检查整个document元素树的范围并提高效率。
回答by PSR
回答by G Jeny Ramirez
Based on @Arun P Johny this is how you do it for an input:
基于@Arun P Johny，这是你如何为输入做的：
<input type="button" class="btEdit" id="myButton1">
This is how I got it in jQuery:
这就是我在 jQuery 中得到它的方式：
$(document).on('click', "input.btEdit", function () {
var id = this.id;
console.log(id);
});
This will log on the console: myButton1. As @Arun said you need to add the event dinamically, but in my case you don't need to call the parent first.
这将登录控制台：myButton1。正如@Arun 所说，您需要动态添加事件，但在我的情况下，您不需要先调用父级。
UPDATE
更新
Though it would be better to say:
虽然最好说：
$(document).on('click', "input.btEdit", function () {
var id = $(this).id;
console.log(id);
});
Since this is JQuery's syntax, even though both will work.
由于这是 JQuery 的语法，即使两者都可以工作。
回答by SP Singh
on document ready event there is no a tag with class tabclick. so you have to bind click event dynamically when you are adding tabclick class. please this code:
在文档就绪事件中，没有带有类 tabclick 的标签。所以在添加 tabclick 类时必须动态绑定 click 事件。请这个代码：
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick")
.click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
$('#gentab a').attr('href', '#datacollector');
});
回答by Ujjwal
Here is the another solution as well, the bind method.
这也是另一个解决方案，bind 方法。
$(document).bind('click', ".intro", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Cheers :)
干杯:)
回答by FD gi
I Know this is an old topic...but none of the above helped me. And after searching a lot and trying everything...I came up with this.
我知道这是一个古老的话题……但以上都没有帮助我。在搜索了很多并尝试了一切之后......我想出了这个。
First remove the click code out of the $(document).ready part and put it in a separate section. then put your click code in an $(function(){......}); code.
首先从 $(document).ready 部分中删除点击代码并将其放在单独的部分中。然后将您的点击代码放入 $(function(){......}); 代码。
Like this:
像这样：
<script>
$(function(){
//your click code
$("a.tabclick").on('click',function() {
//do something
});
});
</script>
