obtiene - El evento jQuery click no funciona después de agregar clase

on click jquery

Question

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, tabclick a <a> que está dentro de <li> con id="gentab" . Está funcionando bien. Aquí está mi código para el <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 manejador de clics jQuery para estos enlaces

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

Para el primer enlace funciona bien. Está alertando al <li> id. Pero para el segundo <li> , donde la class="tabclick" ha sido añadida por primera jQuery no está funcionando.

Intenté $("a.tabclick").live("click", function() , pero luego el primer clic del enlace tampoco $("a.tabclick").live("click", function() .

Answer 1

Aquí está la otra solución también, el método bind.

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

Saludos :)

Answer 2

Basado en @Arun P Johny, así es como lo haces para obtener una entrada:

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

Así es como lo obtuve en jQuery:

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

Esto iniciará sesión en la consola: myButton1. Como @Arun dijo que necesitas agregar el evento dinámicamente, pero en mi caso no necesitas llamar al padre primero.

ACTUALIZAR

Aunque sería mejor decir:

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

Dado que esta es la sintaxis de JQuery, aunque ambas funcionarán.

Answer 3

Como la class se agrega dinámicamente, debe usar 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);
});

Answer 4

Debe usar 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 elemento #gentab , reduciendo el alcance de tener que verificar todo el árbol de elementos del document y aumentar la eficiencia.

Answer 5

en el evento listo para documentos, no hay una etiqueta con la pestaña de clase. por lo tanto, debe vincular el evento click dinámicamente cuando agrega tabclick class. por favor este código:

$("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 6

.live() está en desuso. Cuando desee utilizar elementos delegados, utilice .on () con la siguiente sintaxis

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

Esta sintaxis funcionará para eventos delegados

.on()