$(document）.ready(function(）{} jquery被调用两次

$(document).ready(function(){} jquery is getting called twice?

本文关键字：调用 jquery 两次 document ready function      更新时间：2023-09-26

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

当我单击save and publish按钮时，我看到上面的警报两次。如果在填写表单时出现任何用户错误，则会出现此问题。（也就是说，如果用户没有填写 MUST 字段，如果他填写了该条目并尝试单击按钮，则 agin）原因是什么？

编辑;"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 {
.........
}

您正在嵌套事件处理程序赋值，这通常是一个错误。 您已经：

$('#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"的那个）移出"单击"处理程序。

相关文章：