jQuery evento click non funziona dopo l'aggiunta della classe

Question

Nella mia pagina JSP ho aggiunto alcuni link:

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

Ha una funzione jQuery registrato per l'evento click:

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

Si aggiungerà una classe , tabclick a <a> che è all'interno di <li> con id="gentab". Funziona bene. Qui è il mio codice per la <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> 

Ora ho un gestore click jQuery per questi collegamenti

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

Per il primo collegamento che sta funzionando benissimo. Sta avvisando l'id <li>. Ma per il secondo <li>, dove il class="tabclick" è stato aggiunto dal primo jQuery non funziona.

Ho provato $("a.tabclick").live("click", function(), ma anche il primo evento di collegamento non funzionava.

Answer 1

Dal momento che l'class si aggiunge in modo dinamico, è necessario utilizzare la delega evento per registrare il gestore di eventi

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

Answer 2

.live() è deprecated.When che si desidera utilizzare per gli elementi delegati quindi utilizzare .on() wiht il seguente sintassi

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

Questa sintassi funziona per eventi delegati

.on()

Answer 3

in caso di evento pronto per il documento non è presente alcun tag con tabclick di classe. quindi devi associare dinamicamente l'evento click quando aggiungi la classe tabclick. si prega di questo codice:

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

si dovrebbe utilizzare il seguente:

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

Questo sarà collegare il vostro evento a tutti i tasselli all'interno dell'elemento #gentab, riducendo la portata di dover controllare l'intero albero document elemento e aumentando l'efficienza.

Answer 5

Sulla base @Arun P Johny questo è come lo si fa per un ingresso:

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

Ecco come ho ottenuto in jQuery:

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

Questo registrerà sulla console: myButton1. Come @Arun ha detto che è necessario aggiungere l'evento dinamicamente, ma nel mio caso non è necessario chiamare prima il genitore.

UPDATE

Anche se sarebbe meglio dire:

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

Poiché questo è la sintassi di JQuery, anche se entrambi funzionerà.

Answer 6

Ecco un'altra soluzione, il metodo di associazione.

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

Saluti :)