Regarding click() in jquery

Question

I have a simple code. I want to click on the button and alert its id. The button is contained in a div. Both button and div have a click() bound to them.

Problem: If I click the button the id of button is alerted and then id of div is also alerted afterwards. I want to prevent the id of div from being alerted.

Code:

<html>
<body>
    <style type="text/CSS">
        #mydiv{
            border: 1px dashed blue;
            width: 90px;
            height: 50px;
        }
    </style>
    <div id="myDiv">
        <input type="button" id="myButton" value="Click Me"></input>
    </div>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="code.js"></script>
</body>
</html>

Code.js:

$('#myDiv').click(function(){
            alert($('#myDiv').attr('id'));
        });

$('#myButton').click(function(){
            alert($('#myButton').attr('id'));
        });

score 6 · Answer 1 · answered Sep 11 '14 at 08:14

You need to use event.stopPropagation()

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

Use

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

DEMO

score 2 · Accepted Answer · answered Sep 11 '14 at 08:14

2

You can use stopPropagation() method of the event object to prevent it from bubling upwards.

$('#myButton').click(function(e){
   e.stopPropagation();
   alert($(this).attr('id'));
});

answered Sep 11 '14 at 08:14

T J

42,762
13
83
138

You were the first to answer? – ρss Sep 11 '14 at 08:18
1

I have to wait 7 minutes to accept the answer. Atleast I can give +1 to all the answers, they all are same. – ρss Sep 11 '14 at 08:19

score 1 · Answer 3 · answered Sep 11 '14 at 08:15

1

Use event.stopPropagation() as shown :

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

answered Sep 11 '14 at 08:15

Kartikeya Khosla

18,743
8
43
69

score 1 · Answer 4 · answered Sep 11 '14 at 08:16

1

$('#myButton').click(function(e){ // the extra parameter here is the event object
   e.stopPropagation(); // stops event bubbling up
   alert($(this).attr('id')); // the this in the current scope is the myButton element so you can just use this.id
});

answered Sep 11 '14 at 08:16

Mardoxx

4,372
7
41
67

Would `prop` be better or not? – Giannis Paraskevopoulos Sep 11 '14 at 08:22
yes http://stackoverflow.com/questions/5874652/prop-vs-attr in some circumstances. However, since `id` is a string anyway, I'd think in this case not? Maybe prop would be quicker anyway, not sure. – Mardoxx Sep 11 '14 at 08:24

Regarding click() in jquery

4 Answers4