événement Bind click unique pour chaque élément répéteur (ajax/jquery)

Question

ok donc je ce répéteur:

 <asp:Repeater runat="server" ID="rep" > 
     <ItemTemplate> 
     <tr> 
     <td>   
     <div id="resultDiv"> 
     click me 
     </div>      
     </td> 
     </tr>    
     </ItemTemplate> 
     </asp:Repeater> 

et j'ai cet appel ajax jquery:

$(document).ready(function() { 
      $("#resultDiv").click(function() { 
       $.ajax({ 
        type: "POST", 
        url: "Page.aspx/GetDate", 
        data: "{}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (msg) { 
         // Replace the div's content with the page method's return. 
         $("#resultDiv").text(msg.d); 
        } 
       }); 
      }); 
     }); 

le problème est que Cela ne fonctionne que pour la première div à l'intérieur du répéteur. Si je clique sur d'autres divs, l'événement click n'est pas déclenché. Je sais que c'est parce qu'ils ont tous le même id, étant "resultDiv".

Je suis maintenant à la recherche d'une façon de leur donner ID uniques, ce qui est quelque chose que je peux faire comme ceci: (à l'intérieur du répéteur itemtemplate)

<td>   
<div id="resultDiv_<%#Eval("divId") %>"> 
click me 
</div>   

Cela donne tous les divs à l'intérieur du répéteur un identifiant unique , mais cette façon, l'événement ne marche pas cliquable ajax feu plus parce que

$("#resultDiv").click(function() { 

resultDiv est maintenant quelque chose comme resultDiv_1 ou resultDiv_2. Je cherche donc quelque chose pour lier un événement click à chaque div à l'intérieur du répéteur. J'ai essayé de le faire comme ceci dans l'appel d'ajax:

$("#<%#Eval("divId") %>").click(function() 

mais cela ne fonctionne pas et me donne toutes sortes d'erreurs.

Y at-il un moyen de le faire? S'il vous plaît ne pas que je ne veux pas utiliser les panneaux de mise à jour.

Answer 1

Si vous avez besoin d'un gestionnaire d'événements en direct, vous devez utiliser on:

$("body").on('click', '#resultDiv', function(e) { }); 

Si vous voulez gérer tous #resultDiv la même manière (en utilisant resultDiv_1 ou resultDiv_2) vous pouvez utiliser:

$("body").on('click', 'div[id^=resultDiv]', function(e) { }); 

Vous pouvez utiliser des classes à la place des ID car elles ne sont pas uniques, vous pouvez facilement les utiliser avec addClass ou removeClass!

Dans votre cas, j'ajouterais la même classe à chaque div, et passer un paramètre dans certaines données attr (si vous avez besoin d'avoir chaque clic pour appeler une tâche différente):

<div id="resultDiv" class="result" data-some-var="some-param"> 
    click me 
</div> 

Et que sur votre événement:

$("body").on('click', '.result', function(e) { 
    var param = $(this).attr('data-some-var'); 
    //send or do something different according to the param 
});