CODEWITHSUNDEEP
javascriptjquerylist
subzero
subzero

Reputation: 61

how can i prevent nested list's click event

<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<script>
    $(document).ready(function(){
    $("li").has("ul").bind("click",function(e){
        console.log($(this).text());
    });
    });
</script>

<ul>
<li>Fruit
    <ul>
        <li>Apple</li>
        <li>Banana</li>
    </ul>
</li>
</ul>

How can I bind click-event only when Fruit is clicked, not Apple, Banana

I hope that click-event is not occured when Apple or Banana is clicked

please help me..

Upvotes: 2

Views: 472

Answers (6)

Arun P Johny
Arun P Johny

Reputation: 388416

$(document).ready(function () {
    $("li").has("ul").bind("click", function (e) {
        console.log($(this).text());
    });
    $("li ul").bind("click", function (e) {
        e.stopPropagation()
    });
});

Demo: Fiddle

Another solution without stopping the event propagation is something like(will work for the given markup) 

$(document).ready(function () {
    $("li").has("ul").bind("click", function (e) {
        if ($(this).is(e.target)) {
            console.log($(this).text());
        }
    });
});

Demo: Fiddle

Upvotes: 0

Jeeva J
Jeeva J

Reputation: 3251

<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<script>
    $(document).ready(function(){
    $("ul li").on("click",function(e){
       alert($(this).text())
    });

     or

     $("ul li").live("click",function(e){
       alert($(this).text())
    }); 

    });
</script>

<ul>
<li>Fruit
    <ul>
        <li>Apple</li>
        <li>Banana</li>
    </ul>
</li>
</ul>

No need to prevent. Based on your jquery plugin version use live or on. Both are same. If you use this it'll handle the click event that which element you are clicked. The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148694

Try this : working example

$("li").has("ul").bind("click", function (e) {

      if (!$(e.target).find("li").length) return;

        console.log($(this).text());

    });

Upvotes: 0

sudhansu63
sudhansu63

Reputation: 6200

Try this.

$("li").has("ul").bind("click",function(e){
        console.log($(this).text());

    e.cancelBubble = true;
    e.returnValue = false;

    //e.stopPropagation works only in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
    });

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 238015

One way, as already illustrated, is with event.stopPropagation(). I dislike this method, since it prevents any other event handlers on the page registering the event.

Better is to check to see if the event originated in another li element. Something like this would do:

$("li").has("ul").bind("click",function(e){
    if ($(e.target).closest('li').get(0) !== this) {
        return;
    }

    console.log($(this).text());
});

Let's break apart the key line there:

  • get e.target, the element where the event originated
  • make a jQuery object out of it
  • check to see if that element is an li or get its nearest li ancestor (closest does this)
  • get that li as a native DOM element
  • compare the li to the one where the event handler was bound

If the li elements are not the same, the event originated on a nested li. If they are the same, it didn't.

jsFiddle

Upvotes: 3

dooxe
dooxe

Reputation: 1490

Wrap you 'Fruit' with an element (like span), and bind the event on this element.

From Quentin's advice, use an element that will tell the user that it is interactive (like <button>, <a>), it's better in fact.

Upvotes: 2

Related Questions