Organization DataBusiness UnitsApplications

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

jquery

110690 просмотра

7 ответа

На своей странице 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в <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(), но тогда первое событие щелчка ссылки также не работало.

Автор: Shiju K Babu Источник Размещён: 12.11.2019 09:38

Ответы (7)


170 плюса

Решение

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

$(document).on('click', "a.tabclick", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});
Автор: Arun P Johny Размещён: 03.06.2013 08:51

16 плюса

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

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

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

Автор: palaѕн Размещён: 03.06.2013 09:02

12 плюса

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

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

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

.на()

Автор: PSR Размещён: 03.06.2013 08:52

6 плюса

Основываясь на @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, хотя оба будут работать.

Автор: G Jeny Ramirez Размещён: 05.02.2014 09:48

2 плюса

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

});
Автор: SP Singh Размещён: 03.06.2013 08:58

1 плюс

Вот еще одно решение, метод связывания.

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

Ура :)

Автор: Ujjwal Размещён: 22.07.2015 08:10

0 плюса

Я знаю, что это старая тема ... но ничего из вышеперечисленного не помогло мне. И после долгих поисков и всех попыток ... я придумал это.

Сначала удалите код клика из части $ (document) .ready и поместите его в отдельный раздел. затем поместите ваш код клика в $ (function () {......}); код.

Нравится:

<script>
  $(function(){
    //your click code
    $("a.tabclick").on('click',function() {
      //do something
    });
  });
</script>
Автор: FD gi Размещён: 16.08.2018 09:21
Вопросы из категории :
32x32