JQuery 函数在初始触发时不起作用

JQuery function not working on initial trigger

本文关键字：不起作用 函数 JQuery      更新时间：2023-09-26

所以我有一个触发jquery函数的按钮。在此函数中，进行 AJAX 调用（取决于某些因素），将div 'XYZ' 附加到文档中的某个位置。完成此操作后，我希望div XYZ弹出具有leanModal bootstrap特征。

这是触发的函数：

$(document).on("click", ".view_order", function(){
 //…stuff...
 var filled = $(this).attr("data-filled");
 if(filled == 0){
    $.ajax({ 
        type: 'post', 
        data: {action: 'ABC123', var1: var1},
        dataType: 'json',
        success: function(popup){
           //div XYZ is created and appended.
        }
    })
 }
 // Now I call a function that mimics the bootstrap leanModal function (tailored to work   
 // without a selector)
 $.leanModalNoSelector({
    top : 200,
    overlay : 0.6,
    closeButton : ".modal_close"
}, $(this));

}）;

下面是一个来自leanModalNoSelector的代码的缩写区域：

        var defaults={
                . . . . . . . . etc. . . . . . 
        };
        // this creates the grey background overlay:
        var overlay=. . . . . ;
        $("body").append(overlay);
        options=$.extend(defaults,options);
        return this.each(function(){
            var o=options;
            $(this).click(function(e){
                // Getting the href attribute of the original, clicked element (which points to div XYZ)
                var modal_id=$(this).attr("href");
                $("#lean_overlay").click(function(){
                    close_modal(modal_id)
                });
                $(o.closeButton).click(function(){
                    close_modal(modal_id)
                    });
                    // dimensions of the div XYZ set here
                     . . . . .etc. . . . . . . 
                    $("#lean_overlay").css({
                       //dealing with the overlay some more….
                    });
                    $("#lean_overlay").fadeTo(200,o.overlay);
                    $(modal_id).css({
                        "display":"block","position":"fixed",.. . . . . . .etc. . . .
                    });
                    $(modal_id).fadeTo(200,1);e.preventDefault()
                })
            });
        function close_modal(modal_id){
                 … … … … … … …
            })
        }
    }

我的问题是这完美地工作 - 第二次点击它。第一次单击触发器元素时，将创建新的div，但 leanModal 函数根本不执行任何操作。但是，如果我第二次单击它，leanModal 函数可以正常工作。

我的问题是为什么它在第一次点击后不起作用......感谢提前提供的任何帮助，伙计们。

因为您的模态函数在 ajax 成功回调之前调用。您有两种选择来解决此问题：

  1. 在附加div xyx 后，从 ajax 成功回调内部调用模型函数。

  2. 将 ajax 配置异步属性设置为 false，默认情况下为 true。

    例：

    $.ajax（{            类型："帖子"，            data： {action： 'ABC123'， var1： var1}，            数据类型："json"，            异步：假，            成功：函数（弹出窗口）{               创建并附加div XYZ。            }        })

在 ajax 上添加异步参数并将其设置为 false：

   $(document).on("click", ".view_order", function(){
     //…stuff...
     var filled = $(this).attr("data-filled");
     if(filled == 0){
        $.ajax({ 
            type: 'post', 
            data: {action: 'ABC123', var1: var1},
            dataType: 'json',
            async: false,
            success: function(popup){
               //div XYZ is created and appended.
            }
        })
     }
     // Now I call a function that mimics the bootstrap leanModal function (tailored to work   
     // without a selector)
     $.leanModalNoSelector({
        top : 200,
        overlay : 0.6,
        closeButton : ".modal_close"
    }, $(this));
相关文章：