html div onclick event

Question

I have one html div on my jsp page, on that i have put one anchor tag, please find code below for that,

<div class="expandable-panel-heading">
     <h2>
         <a id="ancherComplaint" href="#addComplaint" 
                            onclick="markActiveLink(this);">ABC</a>
     </h2>
</div>

js code

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
     alert('123');
 });

function markActiveLink(el) {   
    alert($(el).attr("id"));
}

here I when I click on div I got alert with 123 message, its fine but when I click on ABC I want message I want to call markActiveLink method.

JSFiddle

what is wrong with my code? please help me out.

You need to read up on event bubbling and for sure remove inline event handling if you have jQuery anyway — mplungjan
– mplungjan, Commented Oct 29, 2013 at 10:41
You can keep on using this just what you need is to place the method before the onclick is used. update fiddle here jsfiddle.net/JVrNc/7 — vipulsharma
– vipulsharma, Commented Oct 29, 2013 at 10:48

Community · Accepted Answer · 2017-05-23 10:29:47Z

The problem was that clicking the anchor still triggered a click in your <div>. That's called "event bubbling".

In fact, there are multiple solutions:

Checking in the DIV click event handler whether the actual target element was the anchor
→ jsFiddle

$('.expandable-panel-heading').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});

Stopping the event propagation from the anchor click listener
→ jsFiddle

$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});

As you may have noticed, I have removed the following selector part from my examples:

:not(#ancherComplaint)

This was unnecessary because there is no element with the class .expandable-panel-heading which also have #ancherComplaint as its ID.

I assume that you wanted to suppress the event for the anchor. That cannot work in that manner because both selectors (yours and mine) select the exact same DIV. The selector has no influence on the listener when it is called; it only sets the list of elements to which the listeners should be registered. Since this list is the same in both versions, there exists no difference.

Satpal · Accepted Answer · 2013-10-29 10:45:18Z

2

Try this

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
    alert('123');
});

$('#ancherComplaint').click(function (event) {
    alert($(this).attr("id"));
    event.stopPropagation()
})

DEMO

answered Oct 29, 2013 at 10:45

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Nishu Tayal · Accepted Answer · 2013-10-29 10:46:35Z

2

Try following :

$('.expandable-panel-heading').click(function (e) {
        if(e.target.nodeName == 'A'){
            markActiveLink(e.target)
            return; 
        }else{
            alert('123');
        }
 });

function markActiveLink(el) {   
    alert($(el).attr("id"));
}

Here is the working demo : http://jsfiddle.net/JVrNc/4/

answered Oct 29, 2013 at 10:46

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

Comments

Ari Susanto · Accepted Answer · 2013-10-29 10:50:52Z

2

Change your jQuery code with this. It will alert the id of the a.

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
markActiveLink();    
     alert('123');
 });

function markActiveLink(el) {   
var el = $('a').attr("id")
    alert(el);
}

Demo

answered Oct 29, 2013 at 10:50

Ari Susanto

433 bronze badges

1 Comment

ComFreek Over a year ago

Clicking anywhere in the DIV would result in two alerts() being displayed.

mplungjan · Accepted Answer · 2013-10-29 10:45:06Z

1

You need to read up on event bubbling and for sure remove inline event handling if you have jQuery anyway

Test the click on the div and examine the target

Live Demo

$(".expandable-panel-heading").on("click",function (e) {
    if (e.target.id =="ancherComplaint") { // or test the tag
        e.preventDefault(); // or e.stopPropagation()
        markActiveLink(e.target);
    }    
    else alert('123');
});
function markActiveLink(el) {   
    alert(el.id);
}

answered Oct 29, 2013 at 10:45

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

mamdouh alramadan · Accepted Answer · 2013-10-29 10:51:29Z

1

I would have used stopPropagation like this:

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
     alert('123');
 });

$('#ancherComplaint').on('click',function(e){
    e.stopPropagation();
    alert('hiiiiiiiiii');
});

answered Oct 29, 2013 at 10:51

mamdouh alramadan

8,5166 gold badges39 silver badges53 bronze badges

Comments

ER144 · Accepted Answer · 2013-10-29 11:15:23Z

0

Try out this example, the onclick is still called from your HTML, and event bubbling is stopped.

<div class="expandable-panel-heading">
<h2>
  <a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a>
</h2>
</div>

http://jsfiddle.net/NXML7/1/

answered Oct 29, 2013 at 11:15

ER144

6904 silver badges10 bronze badges

Comments

Borja · Accepted Answer · 2014-02-27 16:35:41Z

0

put your jquery function inside ready function for call click event:

$(document).ready(function() {

  $("#ancherComplaint").click(function () {
     alert($(this).attr("id"));
  });

});

answered Feb 27, 2014 at 16:35

Borja

3,62125 gold badges51 silver badges51 bronze badges

Comments

M.Ganji · Accepted Answer · 2016-04-09 06:49:40Z

0

when click on div alert key

   $(document).delegate(".searchbtn", "click", function() {
        var key=$.trim($('#txtkey').val());
        alert(key);
        });

answered Apr 9, 2016 at 6:49

M.Ganji

87610 silver badges13 bronze badges

Collectives™ on Stack Overflow

html div onclick event

9 Answers 9

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related