Question

所以我有一个触发jquery函数的按钮。在此函数中，进行AJAX调用（取决于某些因素），在文档中的某处附加div'XYZ'。完成此操作后，我希望使用leanModal引导程序特性弹出div XYZ。

这是触发功能：

$(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功能正常工作。

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

Answer 1

因为你的模态函数在ajax成功回调之前调用。您有两种方法可以解决这个问题：

在附加div xyx后，从ajax成功回调中调用模型函数。
将ajax config async属性设置为false，默认情况下为true。

示例：


     $.ajax({ 
            type: 'post', 
            data: {action: 'ABC123', var1: var1},
            dataType: 'json',
            async:false,
            success: function(popup){
               //div XYZ is created and appended.
            }
        })

Answer 2

添加async参数并在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));

JQuery函数不能用于初始触发器

2 个答案: