$(document).ready(function(){} jquery被调用两次了吗? [英] $(document).ready(function(){} jquery is getting called twice?

问题描述

我是jquery的新手.我编写了一个jquery函数来处理某些表单输入.我看到一个奇怪的问题，我的$(document).ready(function(){}被调用了两次.

Im new to jquery..I have written a jquery function to process some form inputs. I see an strange issue that my $(document).ready(function(){} is getting called twice.

我的表格是;

<form>
...........
       <div class="form-actions" id="saveButtons"> 
                    <button class="btn btn-primary" /><%=i18n.localize("save")%></button>
                    <%if(outputs.isPermitted){%><script> </script><a class="btn btn-info" id="publish_api" >Save & Publish</a>  <%}%>
                    <input type="reset" class="btn" value="<%=i18n.localize("cancel")%>" onclick="javascript:window.location.href='./'" />                                         
                </div>
            </form>

jQuery是;

<script>
    $(document).ready(function(){


    $('#publish_api').click(function(e){
        $("body").on("api_saved", function(e){
            $.ajax({
                ........
        });
        $("#manage_form").submit();
    });

</script>

当我单击save and publish按钮时，我两次看到以上警报.如果在填写表单时出现任何用户错误，则会发生此问题. (也就是说，如果用户没有填写MUST字段，并且再次填写了该条目并尝试单击按钮，那么这是什么原因?

I see above alert twice when i click save and publish button. This issue occurs if there any user error in filling the form. (That is, if user does not fill a MUST field and agin if he filled that entry and try to click the button) What would be the cause?

修改； "api-saved"事件处理程序是通过javascript之类的方法调用的； (以验证该形式的所有参数)

Edit; The "api-saved" event handler is called from a javascript like; (to validate all params in that form)

var v = $("#manage_form").validate({
        submitHandler: function(form) {
        if(!validate_tiers()){
            return false;
        }

        $('#saveMessage').show();
        $('#saveButtons').hide();        
        $(form).ajaxSubmit({
            success:function(responseText, statusText, xhr, $form) {
                $('#saveMessage').hide();
                $('#saveButtons').show();                
                if (!responseText.error) {                
                    $( "body" ).trigger( "api_saved" );       
                } else {
.........

}

推荐答案

您正在嵌套事件处理程序分配，这通常是一个错误.您已经:

You're nesting event handler assignment, which is usually a bug. You've got:

$('#publish_api').click(function(e){

为元素中的"click"事件建立处理程序.在该事件处理程序中的代码是用于设置另一个事件处理程序的代码:

which establishes a handler for the "click" event from an element. Inside that event handler is code that sets up another event handler:

    $("body").on("api_saved", function(e){
        alert("calling lifecycle jag");
        // ...

可能是一个错误的原因是，点击"处理程序中对.on()的每次调用都将附加该事件处理程序的单独副本.单击两次后，将为"api_saved"事件提供两个相同的处理程序.单击5次后，将有5个处理程序，依此类推.发生这种情况是因为对.on()的调用不会不删除已注册的事件处理程序.

The reason that's likely to be a bug is that every call to .on() inside the "click" handler will attach a separate copy of that event handler. After clicking twice, there will be two identical handlers for the "api_saved" event. After clicking 5 times, there'll be 5 handlers, and so on. That happens because a call to .on() does not remove event handlers that are already registered.

可能正确的做法是将事件处理程序分配("api_saved"的分配)从点击"处理程序中移出.

Probably the right thing to do is move that event handler assignment (the one for "api_saved") out of the "click" handler.

这篇关于$(document).ready(function(){} jquery被调用两次了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！