Событие jQuery click не работает после добавления класса

На моей странице 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, зарегистрированную для события click:

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

Он добавит класс tabclick to <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>. Но для второго <li>, где class="tabclick" был добавлен первым jQuery, не работает.

Я пробовал $("a.tabclick").live("click", function(), но тогда первое событие щелчка ссылки также не работало.

Ответы

Ответ 1

Поскольку class добавляется динамически, вам необходимо использовать делегирование событий для регистрации обработчика событий

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

Ответ 2

Вы должны использовать следующее:

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

Это добавит ваше событие к любым якорям в элементе #gentab, уменьшая объем проверки всего дерева элементов document и повышения эффективности.

Ответ 3

.live() устарел. Когда вы хотите использовать для делегированных элементов, используйте .on() с следующим синтаксисом

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

Этот синтаксис будет работать для делегированных событий

.on()

Ответ 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 сказал, что вам нужно добавить событие динамически, но в моем случае вам не нужно сначала вызывать родителя.

ОБНОВЛЕНИЕ

Хотя было бы лучше сказать:

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

Так как это синтаксис JQuery, хотя оба будут работать.

Ответ 5

в событии документа нет тега с классом 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

Вот еще одно решение, метод привязки.

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

Приветствия:)