<ul id='myid'>  
<li id='1'> my text 1 <p id='1' >inside p1 clicked</p></li>  
<li id='2'> my text 2 <p id='1' >inside p2 clicked</p></li>  
<li id='3'> my text 3 <p id='1' >inside p3 clicked</p></li>  
<li id='4'> my text 4 <p id='1' >inside p4 clicked</p></li>  
<li id='5'> my text 5 <p id='1' >inside p5 clicked</p></li>  

</ul>    

Hi , I just want to know how to alert if I click on "my text 1" and how to alert if I click on "inside p1 clicked" . Because whenever I try to click on "my text1" it's working. but when I try to click on "inside p1 clicked" its bringing two alerts one with the "my text 1" and other with the "inside p1 clicked". Please help what could be the solution.

below is the code which I m using.

$("#myid").delegate('p','click', function(){

Thanks in advance

<ul id='myid'>  
<li id='1'> my text 1 <p id='1' >inside p1 clicked</p></li>  
<li id='2'> my text 2 <p id='1' >inside p2 clicked</p></li>  
<li id='3'> my text 3 <p id='1' >inside p3 clicked</p></li>  
<li id='4'> my text 4 <p id='1' >inside p4 clicked</p></li>  
<li id='5'> my text 5 <p id='1' >inside p5 clicked</p></li>  

</ul>    

Hi , I just want to know how to alert if I click on "my text 1" and how to alert if I click on "inside p1 clicked" . Because whenever I try to click on "my text1" it's working. but when I try to click on "inside p1 clicked" its bringing two alerts one with the "my text 1" and other with the "inside p1 clicked". Please help what could be the solution.

below is the code which I m using.

$("#myid").delegate('p','click', function(){

Thanks in advance

• javascript
• jquery
• html
• dhtml

• 1 Can you post your jquery code also? – rahul Commented Oct 22, 2010 at 4:17

3 Answers 3

Its a matter of event bubbling. You can get the current clicked element using event.target.

If you want to stop event bubbling you can use event.stopPropagation

// click event for li
$("#myid li").click(function(){
    alert("li clicked");
});

// click event for p
$("#myid li p").click(function(e){
    alert("p clicked");
    // stop event bubbling
    e.stopPropagation();
});

And you HTML is also not valid. Never start an id with a numeric.

If you want to attach click event for future elements also then use .live or .delegate.

And put return false instead of e.stopPropagation.

// click event for li
$("#myid li").live("click", function(){
    alert("li clicked");
});

// click event for p
$("#myid li p").live("click", function(){
    alert("p clicked");
    // stop event bubbling
    return false;
});

You can use a selector like

$("li p").click(function(){
alert("p inside li is clicked");
})

here is the Demo

If you're already getting two events, calling event.stopPropagation() in each click handler will prevent the other from being called.

Even simpler would be to add one click handler to #myid and then check the event.target property to decide how to handle it.