Question

在我的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()，但第一个链接点击事件也无效。

Answer 1

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

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

Answer 2

您应该使用以下内容：

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

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

Answer 3

不推荐使用

.live()。当您想要使用委托元素时，请使用.on（），其语法如下

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

此语法适用于委派事件

.on()

Answer 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说您需要以dinamically方式添加事件，但在我的情况下，您不需要先调用父级。

更新

虽然最好说：

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

因为这是JQuery的语法，即使两者都有效。

Answer 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');

});

Answer 6

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

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

干杯：）

Answer 7

我知道这是一个老话题...但是以上都不对我有帮助。经过大量搜索并尝试了所有方法之后...我想到了这一点。

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

赞：

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

添加类后，jQuery click事件无法正常工作

7 个答案: