59

在我的 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>，class="tabclick"第一个 jQuery 添加的 jQuery 不起作用。

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

4

7 回答 7

194

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

$(document).on('click', "a.tabclick", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});
于 2013-06-03T08:51:47.473 回答
19

您应该使用以下内容：

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

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

于 2013-06-03T09:02:05.813 回答
13

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

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

此语法适用于委托事件

。上（）

于 2013-06-03T08:52:03.650 回答
8

基于@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 的语法，即使两者都可以。

于 2014-02-05T21:48:53.577 回答
2

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

});
于 2013-06-03T08:58:33.193 回答
2

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

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

干杯:)

于 2015-07-22T08:10:57.477 回答
1

我知道这是一个老话题......但以上都没有帮助我。经过大量搜索并尝试了一切……我想出了这个。

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

像这样：

<script>
  $(function(){
    //your click code
    $("a.tabclick").on('click',function() {
      //do something
    });
  });
</script>
于 2018-08-16T09:21:56.733 回答