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, Oct 29 '13 at 10:41
possible duplicate of [jQuery stopPropagation bubble down](http://stackoverflow.com/questions/2728252/jquery-stoppropagation-bubble-down) — Tats_innit, Oct 29 '13 at 10:45
You can keep on using this just what you need is to place the method before the onclick is used. update fiddle here http://jsfiddle.net/JVrNc/7/ — vipulsharma, Oct 29 '13 at 10:48

score 18 · Accepted Answer · edited May 23 '17 at 10:29

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.

score 2 · Answer 2 · answered Oct 29 '13 at 10:45

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 '13 at 10:45

Satpal

132,252
13
159
168

score 2 · Answer 3 · answered Oct 29 '13 at 10:46

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/

score 2 · Answer 4 · answered Oct 29 '13 at 10:50

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 '13 at 10:50

Ari Susanto

43
3

Clicking anywhere in the DIV would result in two alerts() being displayed. – ComFreek Oct 29 '13 at 10:51

score 1 · Answer 5 · answered Oct 29 '13 at 10:45

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);
}

score 1 · Answer 6 · answered Oct 29 '13 at 10:51

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 '13 at 10:51

mamdouh alramadan

8,349
6
36
53

score 0 · Answer 7 · answered Oct 29 '13 at 11:15

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/

score 0 · Answer 8 · answered Feb 27 '14 at 16:35

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 '14 at 16:35

borchvm

3,533
16
44
45

score 0 · Answer 9 · answered Apr 09 '16 at 06:49

0

when click on div alert key

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

answered Apr 09 '16 at 06:49

M.Ganji

818
8
13

html div onclick event

9 Answers9

Linked