jQuery cliquez sur l'événement ne fonctionne pas après l'ajout de classe
Dans ma page JSP j'ai ajouté quelques liens:
<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>
Il a une fonction jQuery enregistrée pour l'événement click:
$("a.applicationdata").click(function() {
var appid = $(this).attr("id");
$('#gentab a').addClass("tabclick");
$('#gentab a').attr('href', '#datacollector');
});
, Il va ajouter une classe, tabclick à <a>, qui est à l'intérieur de <li> avec id="gentab". Il fonctionne très bien. Voici mon code pour le <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>
Maintenant, j'ai un gestionnaire de clics jQuery pour ces liens
$("a.tabclick").click(function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Pour le premier lien, cela fonctionne bien. Il alerte l'id <li>. Mais pour le second <li>, où le class="tabclick" est ajouté par le premier jQuery est pas de travail.
J'ai essayé $("a.tabclick").live("click", function(), mais le premier événement de clic de lien ne fonctionnait pas non plus.
7 réponses
Étant donné que le class est ajouté dynamiquement, vous devez utiliser la délégation d'événements pour enregistrer le gestionnaire d'événements
$(document).on('click', "a.tabclick", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Vous devez utiliser ce qui suit:
$('#gentab').on('click', 'a.tabclick', function(event) {
event.preventDefault();
var liId = $(this).closest("li").attr("id");
alert(liId);
});
Cela attachera votre événement à toutes les ancres dans l'élément #gentab ,
réduire la portée de la vérification de l'ensemble de l'arborescence des éléments document et augmenter l'efficacité.
Basé sur @Arun P Johny voici comment vous le faites pour une entrée:
<input type="button" class="btEdit" id="myButton1">
C'est comme ça que je l'ai eu dans jQuery:
$(document).on('click', "input.btEdit", function () {
var id = this.id;
console.log(id);
});
Cela va se connecter sur la console: myButton1. Comme @ Arun l'a dit, vous devez ajouter l'événement dinamically, mais dans mon cas, vous n'avez pas besoin d'appeler le parent en premier.
Mettre à jour
Bien qu'il serait préférable de dire:
$(document).on('click', "input.btEdit", function () {
var id = $(this).id;
console.log(id);
});
Puisque c'est la syntaxe de JQuery, même si les deux fonctionneront.
Lors de l'événement document ready, il n'y a pas de balise avec la classe tabclick. vous devez donc lier dynamiquement l'événement click lorsque vous ajoutez une classe tabclick. veuillez ce code:
$("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');
});
Voici une autre solution, la méthode bind.
$(document).bind('click', ".intro", function() {
var liId = $(this).parent("li").attr("id");
alert(liId);
});
Cheers:)
Je Sais que c'est un vieux sujet...mais rien de ce qui précède ne m'a aidé. Et après avoir cherché beaucoup et tout essayé...Je suis venu avec cette.
Supprimez D'abord le code de clic du $(document).préparez la partie et mettez - la dans une section séparée. Ensuite, mettez votre code de clic dans un $(function(){......}); code.
Comme ceci:
<script>
$(function(){
//your click code
$("a.tabclick").on('click',function() {
//do something
});
});
</script>