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

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>

它有一个为click事件注册的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

由于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() {

此语法适用于委派事件

.上()

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方式添加事件,但在我的情况下,你不需要先调用父节点.

UPDATE

虽然最好说:

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

因为这是JQuery的语法,即使两者都有效.