Jquery停止触发事件

Question

I have simple scenario as shown in fiddle which is

Initially event is binded on only one button A and click event is triggered in both the buttons(A & B) manually.

Now in event handler of button A the event handler for button B is binded. It is expected not to execute the callback of B as it is binded after the event is triggered.

But the callback is still executed. Where am i going wrong?

HTML:

<div>
    <button class="a">botton A</button>
    <button class="b">button B</button>
</div>

JS:

$(function () {
    $('div').on('click', '.a', function (e) {
        e.preventDefault();
        $('div').on('click', '.b', function () {
            alert('Can"t see me')
        });
    });
    $('button').trigger('click');
});

FIDDLE LINK

EDIT:
I have this scenario in my project and now I knew why is this happening :). But how can i stop event from propagating?

Answer 1

$('button').trigger('click'); triggers a click event on both buttons in the order they appear in the document markup. Since event bubbling is synchronous, the event for .b is binded before the click event is triggered on that button. Here's the breakdown:

1. $('button') creates a collection of button .a and button .b .
2. .trigger('click'); iterates through each button in the collection and generates a click event.
3. button .a receives the click event and runs its event handler you registered for it on page load.
4. The event handler for .b is registered within the callback of the event handler for .a .
5. button .b receives the click event from .trigger('click'); since it's second in the collection.
6. The callback of the event listener for button .b triggers the popup alert.

Since you only want to trigger button .a to be clicked, any of the following will work on your current document:

• $('.a').trigger('click');
• $('button.a').trigger('click'); (though this is redundant)
• $('button').get(0).trigger('click'); (since .a is the 0th indexed button element)

EDIT Although this is unrelated to the question, Perhaps you meant to register the event for .b only once, doing this:

$('.a').one('click', function (e) {

 $(function() { $('.a').one('click', function(e) { e.preventDefault(); $('div').on('click', '.b', function() { alert('Can\\'t see me'); }); }); $('.a').trigger('click'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class="a">button A</button> <button class="b">button B</button> </div> 

SECOND EDIT If you want to stop event propagation, you need to add another event listener, like this:

 $(function() { $('.a').one('click', function() { $('.b').on('click', function(e) { e.stopPropagation(); alert('Can see me'); }); $('div').on('click', '.b', function() { alert('Can\\'t see me'); }); }); $('button').trigger('click'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class="a">button A</button> <button class="b">button B</button> </div> 

Answer 2

It's because of $('button').trigger('click'); .

This triggers a click on every button - first it clicks on .a , which binds the click handler to .b , then it clicks on .b .

In my experiment, simply putting button .b first fixed this, but I wouldn't rely on that.

Answer 3

This is probably because the click is being triggered on all button instances serially...

button a click gets executed first...in its callback you bind button b click callback...

...then... button b click gets executed...hence callback for b gets executed...

All of this happens in that one call: $('button').trigger('click');

Edit: others have probably answered this before I have...but to iterate trigger the click on the correct element :

$('.a').trigger('click');

Answer 4

The order of the execution is:

• bind .a
• trigger first button (say, a)
• callback for a: bind b
• trigger second button (b)
• callback for b

Even $("button").trigger("click") is a single line, it is a kind of loop , works like if it were:

var buttonElms = $("button");
for (var index in buttonElms) {
   buttonElms[index].trigger("click");
}