Search code examples
javascriptjqueryhtmldhtml

jquery recognize if li is clicked or p inside the li is clicked


<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


Solution

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