jquery trigger table row click event

Question

Sample Code:

<table class="grid">
    <tr>
        <td><a href="#" id="unit_floor_plan_preview">click me &nbsp;</a></td>
        <td class="unitNumber"><span>Unit 1</span></td>
        <td class="unitStatus">Open</td>
    </tr><tr>
        <td class="unitNumber"><span>Unit 2</span></td>
        <td class="unitStatus">Sold</td>
    </tr>
</table>

I am able to get the row index of the row selected to get the exact column data.

tr = $('.grid').find('tr');

tr.bind('click', function(event) {

    unitNo = $(this).find("td.unitNumber span").html(); 
    alert(unitNo);


});

The above tr click event is fine.

My problem now is how to trigger this tr binding event when clicking the anchor link <td><a href="#" id="unit_floor_plan_preview">Show map  </a></td>within the table row?

Goal: To get first the unitNo (processed on tr.bind click event) before processing the rest of the code on anchored link?

I tried to duplicate the tr click function within the anchor link click event but got undefined value on unitNo. See my code:

$('a[id^="unit_floor_plan_preview"]').bind('click',function() {
    var tr = $('.grid').find('tr');
    unitNo = $(this).find("td.unitNumber span").html();  

    alert('From link: ' + unitNo);

});

test code: http://jsfiddle.net/VjkML/29/

The problem here is order of operations from event bubbling. The link will always come before the row click. — epascarello
– epascarello, Commented Jun 18, 2013 at 17:52

SpYk3HH · Accepted Answer · 2013-06-19 12:23:47Z

4

Change:

unitNo = tr.find("td.unitNumber span").html();

To:

unitNo = $(this).find("td.unitNumber span").html();

In $('a[id^="unit_floor_plan_preview"]').bind('click' You try to find "td.unitNumber span" within $(this). The problem is, this refers to the link clicked on, thus you'll never find anything!

FYI, you could easily rewrite that ENTIRE statement as follows:

$(document).on("click", '.grid tr, a[id^="unit_floor_plan_preview"]', function(e) {
    e.stopPropagation(); // will prevent double click events from link being clicked within row
    var unitNo = $.trim($(this).closest("tr").find(".unitNumber span").text()); // trim to remove end space, closest gets closest parent of selected type
    if (e.target.tagName == "A") alert('From link: ' + unitNo);
    else alert(unitNo);
});

Example

edited Jun 19, 2013 at 12:23

answered Jun 18, 2013 at 17:41

SpYk3HH

22.6k11 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushanth -- · Accepted Answer · 2013-06-18 17:43:00Z

0

The best way is to bind the event only to your tr and use the event.target to check if it is tr or any other element that was clicked. This way your click event will not be duplicated.

This should work

var unitNo;
var tr;

tr = $('.grid').find('tr');
tr.bind('click', function (event) {

    if ($(event.target).is('tr')) {
        // If it is a tr that is clicked then just use find
        unitNo = $(this).find("td.unitNumber span").html();
    } else {
        // If not tr find the closest tr and then find the element
        unitNo = $(this).closest('tr').find("td.unitNumber span").html();
    }
    alert(unitNo);
});

Check Fiddle

answered Jun 18, 2013 at 17:43

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Try:

var unitNo;
var tr = $('.grid').find('tr');
$('a[id^="unit_floor_plan_preview"]').on('click',function(e) {
    e.stopPropagation();
    unitNo = $(this).closest('tr').find("td.unitNumber span").html();  
    alert('From link: ' + unitNo);
});
tr.on('click', function(event) {
    unitNo = $(this).find("td.unitNumber span").html(); 
    alert(unitNo);
});

jsFiddle example

With the link you need to go up the DOM to the row (via .closest()), then use .find() to go back down the same row to find the span you want to get the Unit value.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 18, 2013 at 17:44

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

jquery trigger table row click event

3 Answers 3

Example

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related