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

So I have a button that triggers a jquery function. In this function, an AJAX call is made (depending on certain factors) that appends div 'XYZ' somewhere in the doc. After this is done, I want div XYZ to popup with the leanModal bootstrap characteristics.

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

Here is the triggered function:

这是触发功能:

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

});

Here is a somewhat abbreviated area of code from leanModalNoSelector:

以下是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){
                 … … … … … … …
            })
        }
    }

My problem is that this works perfectly--the second time it is clicked. The first time the trigger element is clicked, the new div is created, but the leanModal function does nothing at all. If I click it a second time, however, the leanModal function works fine.

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

My question is why it doesn't work after the first click….thanks for any help in advance, guys.

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

2 个解决方案

#1

Because your modal function is calling before the ajax success callback. You have two options to solve this proble:

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

Call the model function from inside the ajax success callback after div xyx appended.

在附加了div xyx之后,从ajax成功回调中调用模型函数。

Set the ajax config async property false, by default it is true.
将ajax config async属性设置为false,默认情况下为true。

example:


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

2 个解决方案

#1

更多相关文章

随机推荐