Question

我需要将表单动态加载到Bootbox模式窗口中。我通过Ajax加载表单。在表单中是一个jQuery UI datepicker字段。

使用浏览器的调试器，当通过Ajax加载表单时，我可以看到添加到DOM的datepicker元素。但是，点击该字段不会做任何事情。日历不会出现，更重要的是，datepicker DOM元素不会像我直接在页面上加载datepicker字段时那样改变。

这是我从索引页面调用的Ajax：

$.ajax({
    type: "post",
    timeout: "100000",
    url: "/cfc/site_functions.cfc",
    beforeSend: function (){ 
        bootbox.dialog({
            message: "Loading...",
            title: modal_title,
            onEscape:false,
            backdrop:true,
            closeButton:true,
            buttons: {
                "Cancel": {}
            }
        });
    },
    data: {
        method: "buildMyForm"
    },
    success: function(objResponse){
        $(".bootbox-body").html(objResponse);
    },
    error: function(xhr, ajaxOptions, thrownError){
        $(".bootbox-body").html("Error loading form.");
    }
});

这里是由Ajax调用调用的Coldfusion函数，它构建表单并初始化datepicker字段：

<cffunction name="buildMyForm" access="remote" returntype="any" returnformat="plain">

    <cfsavecontent variable="local.buildMyForm">

        <script type="text/javascript">
            $(document).ready(function(e) {
                $("#date_posted").datepicker({
                    showAnim: "slide"
                });
            });
        </script>

        <cfoutput>

            <form method="post" id="edit_form" name="edit_form">

                <div class="form-group">
                    <label for="date_posted" class="required">Date</label>
                    <input type="text" class="form-control" id="date_posted" name="date_posted" required autocomplete="off">
                </div>

            </form>

        </cfoutput>
    </cfsavecontent>

    <cfreturn local.buildMyForm>
</cffunction>

任何想法为什么datepicker元素将初始化，但单击日期字段时不工作？还有一个类似的问题，但它的解决方案是更新CSS，因为datepicker日历显示的z-index低于Bootbox模式。但是，在我的情况下，当您点击日期字段时，根本没有填充datepicker元素，因此它不仅仅是隐藏它的问题。

Answer 1

感谢@EdenSource帮助缩小问题范围。

似乎在datepicker代码触发时可能存在一些竞争。我更新了CFC中的javascript（由ajax函数调用以构建表单的代码）并且它有效：

<script type="text/javascript">
    $(document).ready(function(e) {
        $("#date_posted").on("focus",function(){
            if(!$(this).hasClass("hasDatepicker")){
                $(this).datepicker({
                    showAnim: "slide"
                });
                $(this).addClass("hasDatepicker");
                $(this).datepicker("show");
            }
        });
    });
</script>

jQuery UI DatePicker没有出现在通过Ajax加载的Bootbox模式中

1 个答案: