jQuery点击事件添加类后不工作

在我的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() ,但是第一个链接点击事件也不起作用。

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

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

您应该使用以下内容:

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

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

.live()已被弃用。当您想要使用委托元素时,请使用.on()以下语法

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

此语法将适用于委派的事件

。上()

基于@Arun P Johny这是你如何做input:

 <input type="button" class="btEdit" id="myButton1"> 

这是我如何在jQuery中得到它:

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

这将在控制台上login:myButton1。 正如@Arun所说的,你需要以事件的forms添加事件,但在我的情况下,你不需要先调用父项。

UPDATE

虽然最好是说:

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

既然这是JQuery的语法,即使两者都可以工作。

在文档准备好的事件上没有类标签的标签。 所以当你添加tabclick类的时候,你必须dynamic地绑定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'); }); 

这是另一个解决scheme,绑定方法。

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

干杯:)