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

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:

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

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

It will add a class, tabclick to <a> which is inside <li> with id="gentab". It is working fine. Here is my code for the <li>:

这将添加一个类，tabclick为其内部

使用id =“gentab”。它工作正常。这里是我的

代码：

<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.

对于第一个链接，它工作正常。它警告

id。但是对于第二个

ID。但是对于第二个

，第一个jQuery添加了class =“tabclick”是不行的。

，第一个jQuery的添加了类=“tabclick”是不行的。

I tried $("a.tabclick").live("click", function(), but then the first link click event was also not working.

我试过$（“a.tabclick”）。live（“click”，function（），但是第一个链接点击事件也没有用。

6 个解决方案

#1

143

Since the class is added dynamically, you need to use event delegation to register the event handler

由于类是动态添加，你需要使用事件代表团注册事件处理

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

#2

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 #gentab element, reducing the scope of having to check the whole document element tree and increasing efficiency.

这将#gentab元素中的事件附加到任何锚，减少不必检查整个文档元素树和提高效率的范围。

#3

.live() is deprecated.When you want to use for delegated elements then use .on() wiht the following syntax

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

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

This syntax will work for delegated events

这句法将用于委托事件工作

.on()

。上（）

#4

Based on @Arun P Johny this is how you do it for an input:

基于@Arun P约翰尼拉你这是怎么了输入做到这一点：

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

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的语法，虽然两者都可以胜任。

#5

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类。请将此代码：

$("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

Here is the another solution as well, the bind method.

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

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

Cheers :)

干杯:)

#1

143