Affectation d'un événement click aux boutons ajoutés dynamiquement

Question

Je crée dynamiquement des boutons et leur attribue des ID.

Lorsque quelqu'un clique sur ce bouton, je veux recueillir l'ID et à partir de là effectuer une tâche.

Voilà mon travail en cours

$(document).ready(function() { 
    $('input:button').addClass("btnClass"); 
    fillData(); 
    $('#btnGet').click(function() { 
     fillData(); 
    }); 
    function fillData() { 
     $.ajax({ 
      type: "Post", 
      url: "../Linq/myService.asmx/getStudent", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       //var nMsg = (typeof msg.d) == 'string' ? eval('(' + msg.d + ')') : msg.d; 
       var t = "<table width='80%' id='resTab'> <tr>" + 
         "<td colspan='5' style='text-align:center'><font size='3'><strong>Your Search Result......</strong></font></td></tr> <tr><td style='text-align:left' colspan='5'><hr></td></tr> " 
         + " <tr><td style='text-align:center'>Student ID</td><td style='text-align:center'>Student Name</td><td style='text-align:center'>Student Course</td><td style='text-align:center'>Student USN</td></tr>" 
         + " <tr><td style='text-align:left' colspan='5'><hr><br></td></tr> "; 
       $.each(msg.d, function(index, item) { 
        t = t + " <tr><td style='text-align:center'>" + item.studId + "</td><td style='text-align:center'>" + item.studName + "</td><td style='text-align:center'>" + item.studCourse + "</td><td style='text-align:center'>" + item.studUsn + "</td><td><input type='button' ID='btn" + item.studId + "' value='Delete' onClick='onButtonClick()'/></td></tr>"; 
        t = t + " <tr><td style='text-align:left' colspan='5'><hr></td></tr> "; 
       }); 
       t = t + " </table> "; 
       $("#stdData").html(t); 
      }, 
      error: function(msg) { } 
     }); 
    } 


function onButtonClick() { 
    var btnId = $(this).val(); 
    alert(btnId); 
} 

Answer 1

Il suffit d'ajouter un nom de classe de new-button aux boutons que vous créez et ajoutez un gestionnaire de clic après.

donc remplacer ce code

<input type='button' ID='btn" 

avec ce

<input type='button' class="new-button" ID='btn" 

Vous pouvez supprimer le OnButtonClick() de l'événement onclick et remplacer

function onButtonClick() { 
    var btnId = $(this).val(); 
    alert(btnId); 
} 

avec

$(".new-button").live("click", function() { 
    var buttonId = $(this).attr("id"); 
    alert(buttonId); 
}); 

Answer 2

Je ne suis pas sûr que je comprends exactement votre problème, mais vous pouvez essayer d'écrire

var btnId = $(this).attr('id'); 

au lieu de

var btnId = $(this).val(); 

cela vous donnera l'attribut id du bouton cliqué et non la valeur de l'élément de formulaire.

J'espère que cela vous aidera

Jérôme Wagner

Answer 3

Chaque fois que quelqu'un vais cliquer sur ce bouton Je veux récupérer le ID et de là, je vais faire une tâche sur que .............

Essayez de supprimer onclick attribut de cette ligne:

t = t + " <tr><td style='text-align:center'>" + item.studId + "</td><td style='text-align:center'>" + item.studName + "</td><td style='text-align:center'>" + item.studCourse + "</td><td style='text-align:center'>" + item.studUsn + "</td><td><input type='button' ID='btn" + item.studId + "' value='Delete' onClick='onButtonClick()'/></td></tr>"; 

Rendre:

Et vous pouvez maintenant utiliser la méthode live jQuery (depuis votre bouton est généré dynamiquement) pour faire le astuce lorsque ce bouton est cliqué comme ceci:

$(function(){ 
    $('#btn').live('click', function(){ 
    var btnId = $(this).attr('id'); 
    alert(btnId); 
    }); 
}); 

Note:

Pour obtenir id attribut, vous pouvez utiliser attr méthode comme indiqué ci-dessus, par exemple: $(this).attr('id') pas val (qui est utilisé pour obtenir la valeur d'un élément d'entrée) comme votre dans votre code.

Answer 4

Si vous ajoutez dynamiquement des boutons, pensez à utiliser ".live()". Chaque fois que l'événement spécifié se produit, il suit les éléments html dans l'arborescence jusqu'à ce qu'il soit géré. Ceci est plus efficace si vous avez beaucoup d'éléments car l'événement n'est pas assigné à l'élément lui-même. Vous devez attribuer une classe ou quelque chose aux boutons pour les identifier, disons « dynamicButton », donc changer ceci:

<input type='button' ID='btn" + item.studId + 
"' value='Delete' onClick='onButtonClick()'/> 

à ceci:

<input type='button' ID='btn" + item.studId + 
"' value='Delete' class="dynamicButton"/> 

Et vous pouvez écouter les événements avec ce Code:

$('input.dynamicButton').live('click', function (event) { 
     alert($(this).attr('id')); 
    }); 

celui gestionnaire sera appelée à chaque fois un bouton avec la classe « dynamicButton » est cliqué, peu importe la façon dont il est ajouté à la page.

Answer 5

Je l'ai fait en utilisant delegate(). Dans mon cas, un script PHP génère le contenu d'une page à partir d'une base de données MySQL. A chaque élément, un bouton est ajouté (cliquer sur ces boutons permet de supprimer l'élément respectif de la base de données). La suppression est gérée par un autre script PHP qui ces boutons activent, donc un événement click est attaché à chaque bouton comme ceci:

$('.items').delegate('[type="button"]', 'click', remove_item); 

où les boutons font partie de la classe items et remove_item est le rappel pour la suppression.