sélecteur jQuery: délégué cliquez sur événement uniquement des éléments tr avec des données spécifiques

Question

Je suis en train de déléguer un événement de clic à un élément de TR qui contient un TD avec un attribut spécifique, à savoir

<table> 
    <tr> 
    <td>product one</td> 
    <td>price</td> 
    </tr> 
    <tr> 
    <td data-imgurl="images/p2.png">product two</td> 
    <td>price</td> 
    </tr> 
</table> 

L'objectif est de cliquez sur la ligne et récupérez la valeur de l'attribut TD "data-imgurl" de cette ligne, c'est-à-dire l'URI d'une image. Ceci est juste un test pour récupérer cette valeur. En fin de compte, je voudrais que le gestionnaire de clic montre l'image dans un DIV ou peut-être lightbox caché, pas sûr de ce que je veux faire pour le moment.

Mon sélecteur (qui fonctionne uniquement en ce qu'il attribuera un clic à l'élément TD réel:

$("table").delegate("tr td[data-imgurl]", "click", function(evt){ 
    alert($(this).attr("data-imgurl")); 
}); 

Remarque, les données sont créées dynamiquement à partir d'un script côté serveur, et les « données-imgURL "attribut est basé sur la logique dans ce script, de sorte que seuls les produits qui ont réellement des images sont assignés un attribut" data-imgurl "Peut-être que je regarde tout faux, et devrait en quelque sorte attacher les données à la ligne elle-même, mais

Ou peut-être que je devrais réellement pousser l'image dans un TD caché et lui assigner un attribut de classe ou de rel? xists sur la page mais un clic le révèle? L'idée étant toujours que seuls les produits avec des images réelles peuvent être cliquables.

EDIT Ok, j'ai résolu cela en poussant les données dans la ligne elle-même. Cela a plus de sens, chaque rangée est un disque. Solution:

<table> 
    <tr> 
    <td>product one</td> 
    <td>price</td> 
    </tr> 
    <tr data-imgurl="images/p2.png"> 
    <td>product two</td> 
    <td>price</td> 
    </tr> 
</table> 

Et le jQuery

$("table").delegate("tr[data-imgurl]", "click", function(evt){ 
    alert($(this).attr("data-imgurl")); 
}); 

Answer 1

Ouais, je serais le pousser sur la ligne. Ces données définissent le produit, qui est représenté par une ligne, pas une cellule. Quoiqu'il en soit, si vous n'utilisiez pas delegate, il serait facile de placer l'événement click sur la ligne.

$('table tr td[data-imgurl]').parent().click(function (evt) { 
// on tr click 
}); 

Avec delegate, cependant, les choses se messier, et je ne suis pas tout de suite que si l'on peut le faire de cette façon.

Answer 2

La manière dont vous configurez actuellement votre script est un excellent moyen de joindre l'événement. Où vous stockez les données est arbitraire, mais la façon dont vous y accédez peut vous donner des avantages en termes de performances.

La seule partie que je voudrais modifier est la syntaxe du sélecteur. Puisque vous ajoutez dynamiquement l'attribut "data-imgurl", ajoutez également une classe css. Cela peut être une catégorie de votre choix comme suit:

<td data-imgurl="images/p2.png" class="myProduct">product two</td> 

Ensuite, vous pouvez accéder à ce avec le sélecteur suivant:

$("table").delegate("tr td.myProduct", "click", function() { 
    alert($(this).attr("data-imgurl")); 
    //or if you have the metadata plugin 
    //alert($(this).metadata().imgurl); 
}); 

La raison pour laquelle je changerais le sélecteur est la façon dont les contrôles jQuery pour les attributs . Éviter l'utilisation d'attributs dans le sélecteur pour un grand nombre d'éléments est un moyen facile d'accélérer l'exécution de js. L'idée de chargement paresseux des images (comme vous l'avez maintenant) est une excellente idée surtout si vous avez un grand nombre de produits.Une note sur "délégués" vs attacher un événement de clic directement à l'objet: Un délégué est correct dans ce scénario et est recommandé si vous ajoutez dynamiquement des lignes/cellules à cliquer plus tard sur.

Answer 3

Je pense que la sélection de la ligne est le meilleur et ... jQuery a sélecteurs très puissants, et de nombreuses façons de faire la même chose, à savoir:

$('tr:has(td[data-imgurl])').click(function(evt){ 
    // stuff here... 
});