javascript - $(document).ready(function(){} jquery 被调用两次？

Question

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

我的表格是；

<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>

当我点击保存并发布按钮时，我两次看到上面的警报。如果用户在填写表单时出错，就会出现此问题。 (也就是说，如果用户没有填写“必须”字段，然后如果他填写了该条目并尝试单击按钮，那么原因是什么？

编辑； “api-saved”事件处理程序是从 JavaScript 中调用的，例如: (验证该表单中的所有参数)

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 {
.........

}

Answer 1

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

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

它为元素中的“click”事件建立一个处理程序。该事件处理程序内部是设置另一个事件处理程序的代码:

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

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

也许正确的做法是将事件处理程序分配(“api_saved”的分配)移出“click”处理程序。