Javascript JQuery函数在初始触发器上不工作

所以我有一个按钮可以触发jquery函数。在这个函数中，进行了一个AJAX调用（取决于某些因素），将div“XYZ”附加到文档中的某个地方。完成后，我希望div XYZ以leanModal引导特性弹出

以下是触发功能：

$(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){
                 … … … … … … …
            })
        }
    }

我的问题是，在第二次单击时，它工作得很好。第一次单击trigger元素时，会创建新的div，但leanmodel函数什么也不做。但是，如果我再次单击它，leanModal函数可以正常工作

---

我的问题是为什么在第一次单击之后它就不工作了……感谢大家事先提供的帮助。

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

在附加div xyx之后，从ajax成功回调内部调用model函数

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

例如：

$.ajax（{ 键入：“post”， 数据：{action:'ABC123'，var1:var1}， 数据类型：“json”， async:false， 成功：功能（弹出）{ //将创建并追加div XYZ。 } })

---

在ajax上添加async参数并将其设置为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));

---

你能做一把小提琴吗？你知道吗？@turbo2oh不记得了！很抱歉…如果有什么事让我记忆犹新，我会发帖的：/

   $(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));