Jquery Selector: Delegate Click Event To Only Tr Elements With Specific Data

Question

I'm trying to delegate a click event to a TR element that contains a TD with a specific attribute, i.e.

Solution 1:

I think selecting the row is best as well... jQuery has very powerful selectors, and many ways to do the same thing, ie:

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

Solution 2:

Yep, I'd push it onto the row. This data defines the product, which is represented by a row, not a cell.

Regardless, if you weren't using delegate, it would be easy to put the click event onto the row.

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

With delegate, however, things get messier, and I'm not immediately sure if one can do it that way.

Solution 3:

The way your currently setting up your script is a completely fine way to attach the event. Where you store the data is arbitrary, but the way you access it can grant you performance benefits.

The only piece I would change is the selector syntax. Since you're dynamically adding the attribute "data-imgurl", also add a css class. This can be any class of your choosing as follows:

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

Then, you can access this with the following selector:

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

The reason I would change the selector is the way jQuery checks for attributes. Avoiding the use of attributes in the selector for a large number of items is an easy way to speed up the js execution.

The idea of lazy loading images(as you have it now) is a great idea especially if you do have a large number of products. I like what you did there ;)

A note on "delegates" vs attaching a click event to the object directly: A delegate is fine in this scenario and is recommended if you are dynamically adding rows/cells to be clicked later on.

Html5 Developer

Jquery Selector: Delegate Click Event To Only Tr Elements With Specific Data

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Jquery Selector: Delegate Click Event To Only Tr Elements With Specific Data"