javascript - Two submit event handlers on a form. One must stop the other - Stack Overflow

admin管理员组

文章数量:1277875

I have to event handlers attached to a form. The first one that fires should stop the other event if a condition is not met.

The code below does not work, as both events will be triggered. Can you help me?

Thanks!

//fires first
$("#myform").submit(function(){
  if (some validation) {
    alert("You need to make the form valid");
    return false;
  }
});
//fires second
$("#myform").submit(function(){
  //ajax stuff
  return false;
});

p.s. I have to this as the ajax stuff is in a plugin that is not changeable. I cannot avoid two event handlers

I have to event handlers attached to a form. The first one that fires should stop the other event if a condition is not met.

The code below does not work, as both events will be triggered. Can you help me?

Thanks!

//fires first
$("#myform").submit(function(){
  if (some validation) {
    alert("You need to make the form valid");
    return false;
  }
});
//fires second
$("#myform").submit(function(){
  //ajax stuff
  return false;
});

p.s. I have to this as the ajax stuff is in a plugin that is not changeable. I cannot avoid two event handlers

• javascript
• jquery

Share Improve this question Follow asked Dec 22, 2010 at 9:52 Silviu PostavaruSilviu Postavaru 1,79444 gold badges1515 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Have a look at event.stopImmediatePropagation():

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

$("#myform").submit(function(event){
  if (some validation) {
    event.stopImmediatePropagation();
    alert("You need to make the form valid");
    return false;
  }
});

You might also want to use event.preventDefault().

Update: Just to clarify: You can rely on the order the event handlers are called. From jQuery's bind method:

When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.

The order might not be defined in W3C's original definition but it works with jQuery. Otherwise, the above named function would be unnecessary anyway ;)

In short, no. If you have two event handlers, then you have two event handlers. That said however, there are ways around it.

First, remember that javascript execution is single-threaded. If you define a global variable, say var haveCalledSubmit=0;, then you can use that to synch your handlers. For example, if you start each handler function with this:

if(haveCalledSubmit == 1)return haveCalledSubmit = 0;
else haveCalledSubmit = 1;

Then only one of the two handlers will be called. You can easily modify it to match some condition, or to deal with more than two functions.

An alternative is to look into event propagation models. This page will give you all the information you need, although Felix has already mentioned an ajax mand that may do what you want.

本文标签： javascriptTwo submit event handlers on a form One must stop the otherStack Overflow