CODEWITHSUNDEEP
javascriptjquery
Boyd
Boyd

Reputation: 49

jquery trigger table row click event

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 &nbsp;</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/

Upvotes: 0

Views: 20556

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22580

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

Upvotes: 4

j08691
j08691

Reputation: 208032

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.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

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

Upvotes: 0

Related Questions