El evento de clic de jQuery no funciona después de agregar la clase
En mi página JSP agregué algunos enlaces:
<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>
Tiene una función jQuery registrada para el evento click:
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick");
$('#gentab a').attr('href', '#datacollector');
});
Agregará una clase, tabclicka <a>la que está dentro <li>con id="gentab". Está funcionando bien. Aquí está mi código para <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>
Ahora tengo un controlador de clic jQuery para estos enlaces.
$("a.tabclick").click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Para el primer enlace está funcionando bien. Está alertando a la <li>identificación. Pero para el segundo <li>, donde se class="tabclick"agregó el primero, jQuery no funciona.
Lo intenté $("a.tabclick").live("click", function(), pero el primer evento de clic en el enlace tampoco funcionó.
Dado que se classagrega dinámicamente, debe utilizar la delegación de eventos para registrar el controlador de eventos.
$(document).on('click', "a.tabclick", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Debes utilizar lo siguiente:
$('#gentab').on('click', 'a.tabclick', function(event) {
event.preventDefault();
var liId = $(this).closest("li").attr("id");
alert(liId);
});
Esto adjuntará su evento a cualquier anclaje dentro del #gentabelemento, lo que reducirá la posibilidad de tener que verificar todo el documentárbol de elementos y aumentará la eficiencia.
