onClick events in nested html elements [duplicate]

Question

I have a structure like this:

<tr>
 <td onClick="doSomeStuff();">
  <a href="#" onClick="doOtherStuff(1);">1</a>
  <a href="#" onClick="doOtherStuff(2);">1</a>
 </td>
</tr>

My problem is that doSomeStuff() always executes, no matter that I am clicking on a <a href> element.

How I can fix this?

Thanks guys, I found answer in duplicate post - $('td > a').click(function(e) { e.stopPropagation(); }) — bel
– bel, Commented Dec 21, 2013 at 20:28
Make sure it works on all browsers - I've experienced different behaviour from IE before, which required another way of disabling "bubbling". You can read up on it under Turning it off here: quirksmode.org/js/events_order.html — Jervelund
– Jervelund, Commented Dec 21, 2013 at 20:44

Thant Sin Aung · Accepted Answer · 2013-12-21 21:39:45Z

20

If you're using plain javascript. Try this

JS

function doOtherStuff(event,arg) {
        event.stopPropagation();
}

HTML

<tr>
     <td onClick="doSomeStuff();">
            <a href="#" onClick="doOtherStuff(event,1);">1</a>
            <a href="#" onClick="doOtherStuff(event,2);">1</a>
     </td>
</tr>

answered Dec 21, 2013 at 21:39

Thant Sin Aung

7222 gold badges10 silver badges20 bronze badges

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

1 Comment

Naveen Over a year ago

what is event inside html?

Abdallah · Accepted Answer · 2013-12-21 20:38:08Z

0

By using JQuery

<tr>
 <td>
    <span class="td">
      welcome
      <a href="#" class="a">1</a>
      <a href="#" class="a">2</a>
    </span>
 </td>
</tr>

JQuery Code

$(function(){
    $(document).on("click",".td",function(){
        alert('td');
    });
    $(document).on("click",".td a",function(e){
        e.stopPropagation();
    });
    $(document).on("click",".a",function(){
        alert($(this).text());
    });
});

answered Dec 21, 2013 at 20:38

Abdallah

6448 silver badges15 bronze badges

Collectives™ on Stack Overflow

onClick events in nested html elements [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related