Question

I have a small issue, like,

I want to call two functions for same td,
1. if user clicks on td , call a function,
2. when user clicks on span of the td.

Jquery:

 if (jQuery(tr).find("td span").hasClass('drill_icon')) {
        console.log('DRILL DOWN : ');    
    } else {
        console.log('SELECT/UNSELCT : ');
    }

I tried the above jquery conditioning, but did not help.

Please help me, how to check if the user clicked on td, or if the user clicked on span,
I know, if I use two td, then finding can be easy:

<td title="Afghanistan" _colid="1" style="width: 95%; overflow: hidden;">Afghanistan<span class="right drill_icon"></span></td>

Answer 1

Two options:

1. Hook up two handlers:

One for the span:

$("span.drill_icon").click(function() {
    // Do your thing here

    // Stop the event
    return false;
});

…and one on the td:

$("selector for td").click(function() {
    // Do the thing
});

If the click is on the span, that handler will get called first, and since it stops the event, the other handler won’t get called at all.

Live Example | Source

2. Use one handler and do the check on click

Or use one handler but then seen whether the click was in the span:

$("selector for td").click(function(e) {
    // In the span?
    if ($(e.target).closest("span.drill_icon")[0]) {
        // Yes
    }
    else {
        // No
    }
});

Live Example | Source