如何更改同一事件的事件触发顺序?

编程入门 行业动态 更新时间:2024-10-23 02:02:30
本文介绍了如何更改同一事件的事件触发顺序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 Jquery绑定是惊人的,但我不知道绑定发生什么顺序。我现在的问题是:

$(document.body).delegate('form',methods.checkForm); $('form')。bind('submit',methods.submitFormIfCheckedFormIsTrue); methods.checkForm = function(e){ if(!$(this).isVerified()){ return false; } 返回true; }; methods.submitFormIfCheckedFormIsTrue = function(e){ e.preventDefault(); $ .ajax(/ submitForm,{ data:$(this).serialize(), type:post}); };

这显然不是我使用的实际代码,但它非常接近。发生的是,submitFormIfCheckedFormIsTrue函数在checkForm函数之前或期间触发,所以检查是相当无用的。我的黑客是将类checked添加到表单中,并检查表单在其他函数中是否具有该类...但是,然后单击提交,它将进行检查,然后再次单击以提交它如果一切正常...这是迟钝的。

另一件对这个问题很重要的是我在应用程序中完全不同,不能改变的原因而且,它们正在异步加载。

我想知道的主要内容是...如何更改顺序,或者以某种方式设置事件的优先级...

解决方案

如果您在示例中使用delegate的方式,那么ajax的提交总是先运行,所以简短的答案你的问题是你不能。您的代理附加到body元素,因此附加到DOM树中更接近表单的元素的事件将首先触发。

表单中的事件气泡 - >身体,所以没有订单,当你这样做。

一个选择是让你的验证触发第二个事件。

methods.checkForm = function(e){ e.preventDefault() if($(this).isVerified )){ $(this).trigger('form-verified'); } };

然后将其他处理程序绑定到'submit',您将绑定到'form-verified'。

$('form')。bind('form-verified',methods.submitFormIfCheckedFormIsTrue);

这也是完成排序事件的另一种方式,如果它们附加到相同的元素而不是使用委托

另外,如果你使用jQuery> = 1.7,那么你应该使用而不是 bind 和 delegate 。 api.jquery/on/

更新

如果两者都绑定到相同的元素,那么它们将按照它们被附加的顺序触发到元素假设checkForm绑定在另一个之前,则问题是 return false;如果它们附加到同一个元素,则不会阻止其他事件触发。因此,您还需要 e.stopImmediatePropagation()。

方法。 checkForm = function(e){ e.preventDefault() if(!$(this).isVerified()){ e.stopImmediatePropagation(); } };

如果您必须调整事件的顺序,还有一个有用的答案。 jQuery事件处理程序总是执行它们是有约束力的吗?

Jquery bind is amazing, but I don't know in what order the binding happens. My current problem is thus:

$(document.body).delegate('form', methods.checkForm); $('form').bind('submit', methods.submitFormIfCheckedFormIsTrue); methods.checkForm = function (e) { if (!$(this).isVerified()) { return false; } return true; }; methods.submitFormIfCheckedFormIsTrue = function (e) { e.preventDefault(); $.ajax("/submitForm", { data:$(this).serialize(), type:"post" }); };

This is obviously not the actual code that I'm using, but it's pretty close. What happens is, the submitFormIfCheckedFormIsTrue function fires before, or during, the checkForm function, so the checking is pretty useless. My hack for it was to add the class "checked" to the form and the check if the form has that class in the other function...but then you click submit, it checks, then you have to click it again to submit it if everything went right...which is retarded.

Another thing that's important regarding this problem is that I'm they're in completely different parts of my application, for reasons that can't change. Also, they're being loaded asynchronously.

The main thing I want to know then...is how to change the order, or set the priority of the events somehow...

解决方案

If you are using 'delegate' the way you have it in your example, then the ajax submission is always going to run first, so the short answer to your question is "You Can't". Your delegate is attached to the 'body' element, so events attached to elements closer to the form in the DOM tree will fire first.

Events bubble from the form -> body, so there is no ordering when you are doing that.

One option would be to have your verification trigger a second event.

methods.checkForm = function (e) { e.preventDefault() if ($(this).isVerified()) { $(this).trigger('form-verified'); } };

Then instead of binding the other handler to 'submit', you would bind it to 'form-verified'.

$('form').bind('form-verified', methods.submitFormIfCheckedFormIsTrue);

This is also another way to accomplish ordering event if they are attached to the same element instead of using delegate.

Also, if you are using jQuery >= 1.7, then you should be using on instead of bind and delegate. api.jquery/on/

Update

If both are bound to the same element, then they will be triggered in the order that they were attached to the element. Assuming checkForm is bound before the other one, then the issue is that return false; does not stop other events from firing if they are attached to the same element. For that you also need e.stopImmediatePropagation().

methods.checkForm = function (e) { e.preventDefault() if (!$(this).isVerified()) { e.stopImmediatePropagation(); } };

There is also a useful answer over here if you ever have to tweak the ordering of events. jQuery event handlers always execute in order they were bound - any way around this?

更多推荐

如何更改同一事件的事件触发顺序?

本文发布于:2023-10-27 00:05:24,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1531736.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:事件   顺序   如何更改

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!