CODEWITHSUNDEEP
javascriptjqueryhtmlonclick
Anil Chavda
Anil Chavda

Reputation: 171

html div onclick event

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.

Upvotes: 16

Views: 116071

Answers (9)

M.Ganji
M.Ganji

Reputation: 866

when click on div alert key 

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

Upvotes: 0

Borja
Borja

Reputation: 3610

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

$(document).ready(function() {

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

});

Upvotes: 0

ER144
ER144

Reputation: 690

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/

Upvotes: 0

ComFreek
ComFreek

Reputation: 29414

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.

Upvotes: 18

mamdouh alramadan
mamdouh alramadan

Reputation: 8528

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

Upvotes: 1

Ari Susanto
Ari Susanto

Reputation: 43

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

Upvotes: 2

Nishu Tayal
Nishu Tayal

Reputation: 20820

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/

Upvotes: 2

Satpal
Satpal

Reputation: 133403

Try this

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

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

DEMO

Upvotes: 2

mplungjan
mplungjan

Reputation: 177683

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

Upvotes: 1

Related Questions