JQuery Click inside div

Question

I am trying to add a click event on a div thats inside a li that already has a click event. I don't want the li click event to fire when the div click event is fired.

Here is the jsfiddle of what I am trying to do. http://jsfiddle.net/2srUd/5/

When I click on the .inside I don't want the #outside click to fire. I assume I need to ad a not to the selector $(".inside")

<script>
    $(document).ready(function() {

        $("#outside").click(function() {
            alert("outside click");
        });

        $(".inside").click(function() {
            alert("inside click");
        });

    });
</script>
<ul>
    <li id="outside" style="border:2px solid red; padding:20px;">
        <div class="inside" style="border:2px solid blue; ">Click This Div. I want to accept the inside click but not the outside click.</div>
    </li>
</ul>

user1508519 · Accepted Answer · 2013-10-15 00:27:20Z

15

Simple fix:

    $(".inside").click(function(e) {
        e.stopPropagation();
        alert("inside click");
    });

http://api.jquery.com/event.stopPropagation/

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Basically you don't want it to fire the parent's event handler, so you stop the propagation.

answered Oct 15, 2013 at 0:27

user1508519

Sign up to request clarification or add additional context in comments.

1 Comment

djack109 Over a year ago

This doesn't work for me only the outside div ever generates the event. the only difference is that my outside div is a class name not an id if that changes anything <div class='outer'><div class='inner'>a</div><div class='inner'>b</div></div>

Milson · Accepted Answer · 2013-10-15 00:36:21Z

3

Just do: http://jsfiddle.net/2srUd/24/

$(document).ready(function() {
        $("#outside").click(function() {
            alert("outside click");
        });

        $(".inside").click(function() {  
            alert("inside click");
            return false;
        });

    });

answered Oct 15, 2013 at 0:36

Milson

1,5753 gold badges15 silver badges31 bronze badges

Collectives™ on Stack Overflow

JQuery Click inside div

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related