Grande quantité d'éléments onclick ... ou peut-être quelques jquery

Question

Je construis une application qui génère à un certain point une assez grande table récapitulative (20x ~ 200). Certaines des cellules (probablement 1000), que je peux identifier dans le code de support, doivent avoir une sorte de liaison onclick. La valeur de ces cellules doit être analysée dans un champ d'entrée de la page.

J'ai étudié le rendu en ligne de: onclick = genericfunctioncall (« copy_of_celldata ») D'une certaine façon ce ne se sent pas assez moderne pour moi ..... :)

Depuis que je suis en utilisant JQuery pour d'autres choses que je voudrais utiliser. Pensé sur la liaison de classe et la liaison d'identification (doit me rendre les ID, et d'énormes quantités de liaisons). La liaison de classe est ma manière préférée. Mais parce que je rends la table dynamiquement (Ajax appelant un partialview dans MVC4 et rendant le .data) je dois utiliser la méthode .on ("click", ....). Je n'arrive pas à trouver un moyen de détecter quel TD j'ai cliqué pour déterminer sa valeur et l'analyser en entrée.

Quelqu'un a une idée?

Answer 1

Donnez une classe commune à tous les td auxquels vous souhaitez affecter l'événement click.

Utilisez délégation d'événements comme vous liez le même pour plus de 1000 éléments.

Utilisez le contexte this à l'intérieur de l'événement pour obtenir le td sur lequel l'événement a été déclenché.

$('table').on('click', '.tdClass', function() { 
    // this refers to td which triggered the event 
}); 

Answer 2

J'ai été très satisfait de l'utilisation de jQuery.data(). Vous pouvez lier tout ce que vous voulez à un élément DOM. Si vous avez une réponse JSON de votre serveur, voici un exemple d'utilisation:

$.get('/url',function(resp){ 
    $.each(resp,function(k,v){ 
     // v is json object {"name":"item name","id": 22, "link": "http://www.google.com"} 
     var item = $('<li />'); 
     item.html(v.name); 
     item.data('item',v); //attach your json object to dom element. 

     $('ul').append(item); 
    }); 
}); 
$('ul').on('click','li',function(){ 
     var data = $(this).data('item') // get your original object 
     alert(data.link) -->> "http://www.google.com" 
     // do whatever you need to do. 
});