添加类后jQuery单击事件不起作用答案

【问题标题】：jQuery click event not working after adding class添加类后jQuery单击事件不起作用
【发布时间】：2013-05-29 09:15:27
【问题描述】：

在我的 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>

它有一个为点击事件注册的jQuery函数：

$("a.applicationdata").click(function() {
    var appid = $(this).attr("id");
    $('#gentab a').addClass("tabclick");
    $('#gentab a').attr('href', '#datacollector');
});

它将添加一个类，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>

现在我有一个用于这些链接的 jQuery 点击处理程序

$("a.tabclick").click(function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

对于第一个链接，它工作正常。它正在提醒<li> id。但是对于第二个<li>，第一个jQuery 添加的class="tabclick" 不起作用。

我试过$("a.tabclick").live("click", function()，但是第一个链接点击事件也不起作用。

【问题讨论】：

使用“on”事件委托
关于事件委托，请参阅这个 SO 问题：stackoverflow.com/questions/8110934/…

标签： jquery

【解决方案1】：

由于class是动态添加的，所以需要使用事件委托来注册事件处理程序

$(document).on('click', "a.tabclick", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

【讨论】：

如果在代码执行后添加整个元素，这也可以工作，太棒了！
很棒的解决方案

【解决方案2】：

您应该使用以下内容：

$('#gentab').on('click', 'a.tabclick', function(event) {
    event.preventDefault();
    var liId = $(this).closest("li").attr("id");
    alert(liId);  
});

这会将您的事件附加到 #gentab 元素中的任何锚点，减少检查整个 document 元素树的范围并提高效率。

【讨论】：

【解决方案3】：

.live() 已弃用。当您想用于委托元素时，请使用 .on() 并使用以下语法

$(document).on('click', "a.tabclick", function() {

此语法适用于委托事件

.on()

【讨论】：

【解决方案4】：

根据@Arun P Johny，这是您对输入的处理方式：

<input type="button" class="btEdit" id="myButton1">

这是我在 jQuery 中得到它的方式：

$(document).on('click', "input.btEdit", function () {
    var id = this.id;
    console.log(id);
});

这将登录控制台：myButton1。正如@Arun 所说，您需要动态添加事件，但在我的情况下，您不需要先调用父级。

更新

虽然最好说：

$(document).on('click', "input.btEdit", function () {
    var id = $(this).id;
    console.log(id);
});

由于这是 JQuery 的语法，尽管两者都可以工作。

【讨论】：

是this.id 还是$(this).attr("id")？
嘿@ShijuKBabu 我尝试了 $(this).attr("id") 并且遇到了异常。但这在 Google Chrome 上运行良好，您是否使用其他浏览器出现故障？
我没试过。我已经得到了我想要的答案。这是输入按钮。我只是在问，因为我正在使用 $(this).attr("id") 来获取当前对象的 id，它对我有用

【解决方案5】：

在文档就绪事件上没有带有类 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');

});

【讨论】：

【解决方案6】：

这也是另一种解决方案，绑定方法。

$(document).bind('click', ".intro", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

干杯:)

【讨论】：

【解决方案7】：

我知道这是一个老话题......但以上都没有帮助我。在搜索了很多并尝试了一切之后......我想出了这个。

首先从 $(document).ready 部分中删除点击代码，并将其放在单独的部分中。然后将您的点击代码放入 $(function(){......});代码。

像这样：

<script>
  $(function(){
    //your click code
    $("a.tabclick").on('click',function() {
      //do something
    });
  });
</script>

【讨论】：