CODEWITHSUNDEEP
jqueryhtml
Manojkumar
Manojkumar

Reputation: 1361

Call two different functions on same <td> having span, jQuery

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>

Upvotes: 0

Views: 349

Answers (5)

bipen
bipen

Reputation: 36541

use two click function 

 $("span.drill_icon").click(function() {
   //span is clicked..
   spanClickedFunction();
   return false;  //to make sure td click is not called here..this stops the event and td handler won't be called;
});

$("tr td").click(function() {
   //td is clicked..
   tdClickedFunction();

});

function spanClickedFunction(){
  alert('span clicked');
}

function tdClickedFunction(){
  alert('td clicked');
}

Upvotes: 1

alexb
alexb

Reputation: 971

Here you go

<script type="text/javascript">
    $(function () {

        $("td").click(function () {
            alert("click on td");
        });

        $("td span").click(function () {
            alert("click on span");
            return false;
        });
    });
</script>

The important thing to notice is the return false in span click handler which prevents the event to propagate to its DOM parents. I think jquery calls event.stopPropagation() which does this thing.

I see it's hard to test with your example, may I suggest:

  • replace _colid with id
  • add text to span since I see your text is in td
  • add some border to the span (just for test) so you can see where the span actually finishes

Upvotes: 0

Zim84
Zim84

Reputation: 3507

You need to create 2 click handlers. One for the TD and one for the span. 

$("td").click(function() {
    //code that executes when clicked in the td but not in span
});

$("td span.drill_icon").click(function(event) {
    //code that executes when clicked in the span

    //prevents that the click-event gets fired on the parent elements
    event.stopPropagation();
});

Upvotes: 0

Anujith
Anujith

Reputation: 9370

$("table td span.drill_icon").click(function (e){
   alert('Clicked on span');
   e.stopPropagation(); // stops further propagation
});

$("table td").click(function (){
   alert('Clicked on td');
});

See demo

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075279

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

Upvotes: 0

Related Questions