无法通过动态创建的链接打开jQuery-UI对话框

时间:2017-01-30 20:39:11

标签: jquery jquery-ui jquery-ui-dialog

好的,这里有一个奇怪的问题。

我有以下代码:

<script>
$("#calendar_container").on("click",".day-header-link", function(e){

    refreshDialog();

    $.ajax({
        url: $(this).attr("href"),
        success: function(data){
            $(".hover-form").empty().append(data).dialog("open");
        }
    });

    return false;
});
</script>

非常简单明了,当点击的链接没有动态加载时,就像魅力一样。当它们被动态加载时,我收到以下错误。

Uncaught TypeError: $(...).empty(...).append(...).dialog is not a function

我已将引用的div放入页面的非动态部分,我已使用以下函数初始化对话框,该代码在上面的代码段中引用。

function refreshDialog(){
    //kick up the hover form stuff
    $(".hover-form").dialog({
        autoOpen: false,
        draggable: false,
        minWidth:350,
        minHeight: 200,
        modal: true,
        buttons: [
            {
            text: "Close",
            icons: false,
            click: function() {
            $( this ).dialog( "close" );
            }


            }
        ]
    });
}

如果相关,则以下是在日历中动态加载下个月的代码段。

$("#calendar_container").on("click","#previous_month",function(e){

    //get data from link
    res = $(this).attr("href");
    res = res.replace("schedule","ajax");
    res = res.replace("view","standalone_calendar");

    $("#calendar_container").empty();
    $("#calendar_container").html("<img src=\""+BASE_URL+"/images/loading.gif\" alt=\"loading\" />");

    $.ajax({
        async: true,
        url: res,
        method: "post",
        data: "",
        success: function(c){
            $("#calendar_container").empty().append(c);
        }
    });

    return false;
});
$("#calendar_container").on("click","#next_month",function(e){

    //get data from link
    res = $(this).attr("href");
    res = res.replace("schedule","ajax");
    res = res.replace("view","standalone_calendar");

    $("#calendar_container").empty();
    $("#calendar_container").html("<img src=\""+BASE_URL+"/images/loading.gif\" alt=\"loading\" />");

    $.ajax({
        async: true,
        url: res,
        method: "post",
        data: "",
        success: function(c){
            $("#calendar_container").empty().append(c);
        }
    });

    return false;
}); 

1 个答案:

答案 0 :(得分:0)

不确定这是否是最佳解决方案,但我将调用我的refreshDialog()函数移动到ajax成功部分,一切运行顺利。