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

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> , 其中class="tabclick"由首先添加的 jQuery 不起作用。

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

Answer 1

由于类是动态添加的，所以需要使用事件委托(delegate)来注册事件处理器

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