jQuery kliknij zdarzenie nie działa po dodaniu klasy

Question

W mojej strony JSP dodałem kilka linków:

<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> 

Posiada funkcję jQuery zarejestrowanym dla zdarzenia kliknij:

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

doda klasę , tabclick do <a>, który jest w środku <li> z id="gentab". Działa dobrze. Oto mój kod na <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> 

Teraz mam kliknij obsługi jQuery dla tych linków

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

Na pierwszy link jest w porządku pracy. Alarmuje identyfikator <li>. Ale dla drugiego <li>, gdzie class="tabclick" został dodany przez pierwszy jQuery nie działa.

Próbowałem $("a.tabclick").live("click", function(), ale nie zadziałało też pierwsze zdarzenie kliknięcia linku.

Answer 1

Ponieważ class dodaje dynamicznie, trzeba użyć delegacji zdarzeń zarejestrować obsługi zdarzeń

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

Answer 2

.live() JEST deprecated.When chcesz używać dla elementów delegowanymi a następnie użyć .on() wnioskach następujące składnia

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

składnia ta będzie działać na imprezy delegowanych

.on()

Answer 3

na wydaniu gotowym na dokument nie ma tagu z tabclick klasy. więc musisz dynamicznie wiązać zdarzenie click podczas dodawania klasy tabclick. proszę ten kod:

$("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'); 

}); 

Answer 4

Należy użyć następujących:

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

Będzie dołączyć swoje wydarzenie do jakichkolwiek kotew w elemencie #gentab, zmniejszenie zakresu konieczności sprawdź cały document elementu drzewa i zwiększenie wydajności.

Answer 5

podstawie @Arun P Johny ten sposób można zrobić to za wejście:

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

To jak mam go w jQuery:

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

To będzie zalogować się do konsoli: myButton1. Jako że @Arun powiedział, że musisz dodać wydarzenie w sposób dinamiczny, ale w moim przypadku nie musisz najpierw dzwonić do rodzica.

UPDATE

Chociaż lepiej byłoby powiedzieć:

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

Ponieważ jest to składnia jQuery, choć oba będą działać.

Answer 6

Oto inne rozwiązanie, metoda wiązania.

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

Cheers :)