Événement div onclick généré dynamiquement

-1

Je souhaite ajouter un événement onclick à un bouton généré dynamiquement avec ajax. Comment puis-je faire cela?Événement div onclick généré dynamiquement

J'ai ce code qui génère le contenu, et quand nous cliquons sur cet élément, je veux une fenêtre contextuelle.

function getTableData() { 

      $.post('loader.php', getGetStr(), function(data) { 

      Object.size = function(obj) { 
       var size = 0, key; 
       for (key in obj) { 
        if (obj.hasOwnProperty(key)) size++; 
       } 
       return size; 
      }; 
       data = $.parseJSON(data)['query-data']; 
       var leng = Object.size(data); 

       var html = ''; 

       for(var i = 0; i<leng; i++) { 
        html += '<tr><td>&nbsp;</td>\n\ 
           <td>'+data[i].buy_type+'</td>\n\ 
           <td>'+data[i].prop_type+'</td>\n\ 
           <td>'+data[i].district+'</td>\n\ 
           <td>'+data[i].street+'</td>\n\ 
           <td>'+data[i].room_min+'</td>\n\ 
           <td>'+data[i].room_max+'</td>\n\ 
           <td>'+data[i].price_min+' mFt</td>\n\ 
           <td>'+data[i].price_max+' mFt</td>\n\ 
           <td>'+data[i].condition_type+'</td>\n\ 
           <td>'+data[i].heat_type+'</td>\n\ 
           <td>'+data[i].lift_type+'</td>\n\ 
           <td>'+data[i].parking_type+'</td>\n\ 
           <td><img src="style/images/icons/delete.png" id="'+data[i].id+'" class="delete-searching-item"/></td>\n\ 
          </tr>'; 

       } 

       $('table').append(html); 
       $('.delete-searching-item').on('click',function() { 
        var id = $(this).attr('id'); 
          alert(id); 
          $('#submit-delete').append('<input type="hidden" name="to-delete" value="' + id + '">'); 
          $('#why-delete').fadeIn(500); 
       }); 



     }); 
     }

Source

2013-07-30 Allili Omár

jQuery de la fonction ajouter des événements à des éléments, même si elles sont générés avec ajax. Vous pouvez utiliser http://api.jquery.com/on/ ceci sur les éléments générés dans votre chargement de document ou quelque chose. –

Et? Est-ce que ça ne marche pas? Quels symptômes voyez-vous? Que fait-il que vous n'attendez pas? Il semble certainement que cela relierait l'événement click. (Il semblerait aussi qu'il se connecterait deux fois sur certains éléments, si vous appelez 'getTableData' deux fois, parce que vous ne videz pas la table mais que vous accrochez toutes les cellules existantes une fois que vous ajoutez [y compris celles qui étaient déjà là et branché la dernière fois].) –

J'ai une utilisation simliar. J'ai ajouté une fonction onClick à chaque élément $ (document) .ready (function() { \t $ ("a"). Cliquez sur (function() {... mais si j'ajouter du contenu dynamiquement au DOM, et à l'intérieur de ce contenu est un élément , un clic sur ce nouvel élément ne sera pas géré par le gestionnaire onClick – Reinhard

Utilisez comme ceci:

$('table').on('click','.delete-searching-item',function() {

Depuis que vous avez ajouté img.delete-searching-item après dom vous devez faire référence à un élément qui n'a pas changé, table par exemple. Et avec .on() vous pouvez le "récupérer" en dom.

donc votre code tout:

function getTableData() { 
    $.post('loader.php', getGetStr(), function(data) { 
     Object.size = function(obj) { 
      var size = 0, 
       key; 
      for (key in obj) { 
       if (obj.hasOwnProperty(key)) size++; 
      } 
      return size; 
     }; 
     data = $.parseJSON(data)['query-data']; 
     var leng = Object.size(data); 
     var html = ''; 
     for (var i = 0; i < leng; i++) { 
      html += '<tr><td>&nbsp;</td>\n\ 
           <td>' + data[i].buy_type + '</td>\n\ 
           <td>' + data[i].prop_type + '</td>\n\ 
           <td>' + data[i].district + '</td>\n\ 
           <td>' + data[i].street + '</td>\n\ 
           <td>' + data[i].room_min + '</td>\n\ 
           <td>' + data[i].room_max + '</td>\n\ 
           <td>' + data[i].price_min + ' mFt</td>\n\ 
           <td>' + data[i].price_max + ' mFt</td>\n\ 
           <td>' + data[i].condition_type + '</td>\n\ 
           <td>' + data[i].heat_type + '</td>\n\ 
           <td>' + data[i].lift_type + '</td>\n\ 
           <td>' + data[i].parking_type + '</td>\n\ 
           <td><img src="style/images/icons/delete.png" id="' + data[i].id + '" class="delete-searching-item"/></td>\n\ 
          </tr>'; 
     } 
     $('table').append(html); 
     $('table').on('click','.delete-searching-item',function() { 
      var id = $(this).attr('id'); 
      alert(id); 
      $('#submit-delete').append('<input type="hidden" name="to-delete" value="' + id + '">'); 
      $('#why-delete').fadeIn(500); 
     }); 
    }); 
}

Source

2013-07-30 06:11:01 Sergio

Mais notez que dans le code OP, les éléments ** étaient ** dans le DOM par l'appel 'on' était ** après ** l'appel' append' sur la table, donc ils étaient trouvés, la délégation peut être une meilleure approche, mais ce n'est pas un manque de délégation ou essayer de raccorder des éléments qui ne sont pas dans le DOM c'est le problème. (On ne sait pas ce que le PO dit même que le problème * est *.) –

-1

S'il vous plaît vérifier ci-dessous

$(".delete-searching-item").live("click", function(){ }); // jQuery 1.3+ 
$(document).delegate(".delete-searching-item", "click", function(){ }); // jQuery 1.4.3+ 
$(document).on("click", ".delete-searching-item", function(){ }); // jQuery 1.7+

Source

2013-07-30 06:14:19 Vamsikrishna

Événement div onclick généré dynamiquement

Répondre

Questions connexes