jQuery datepicker 没有出现，竞争条件？答案

【问题标题】：jQuery datepicker not appearing, race condition?jQuery datepicker 没有出现，竞争条件？
【发布时间】：2009-12-23 00:13:14
【问题描述】：

以前，当我将日期选择器应用于静态元素时，它会出现，但由于某种原因，我无法让它动态工作。在某些配置下，如果我先弹出一个警告框，它就会起作用。怎么了？

div.load(url, function() {
    div.children().each( function(){this.datepicker({dateFormat:"yy-m-d"}});    
    div.appendTo("div#foos_container");
});

这里有更多的上下文：

Javascript：

   add_foo = function(url) {
    // Clickable
    var numfoos = $("div#foos_container > div.foo").length + 1;
    var foo_id = numfoos + "-foo";
    var div = $("<div></div>").attr("id",foo_id).addClass("foo");
    div.load(url, function() {
        div.children().each(function(){ 
            // what do expect this to be below? 
            // this will be a child element here, so need
            // to wrap to get a jQuery object
            $(this).datepicker({dateFormat:"yy-m-d"}); 
        });        
    div.appendTo("div#foos_container");
});

HTML：

<a id="add_foo" onclick="add_foo('{% url add-foo %}')" class="ajax_link">Add Foo</a>

   <div id="foos_container">

   </div>

谢谢！

编辑：添加上下文。我应该注意到 HTML 是一个 django 模板。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

试试

div.load(url, function() {
        div.children().each(function(){ 
            // what do expect this to be below? 
            // this will be a child element here, so need
            // to wrap to get a jQuery object
            $(this).datepicker({dateFormat:"yy-m-d"}); 
        });        
        div.appendTo("#foos_container");
});

根据您的编辑，尝试以下操作。

add_foo = function(url) {
    // Clickable
    var numfoos = $("#foos_container > div.foo").length + 1;
    var foo_id = numfoos + "-foo";
    var div = $("<div></div>").attr("id",foo_id).addClass("foo");

    div.appendTo("#foos_container").load(url, function() {
        div.children().each(function(){ 
        // what do expect this to be below? 
        // this will be a child element here, so need
        // to wrap to get a jQuery object
        $(this).datepicker({dateFormat:"yy-m-d"}); 
    });        

};

您希望 this 在 div.children().each( ...) 中是什么？

编辑：

这是一个 Working Demo，它模拟了我认为您正在努力实现的目标。将 /edit 添加到 URL 以查看代码并使用它（示例如下）。

<a id="add">Click me to add a div via AJAX Load</a>
<div id="foos_container"></div>

$(function() {

    $('#add').click(function() {

        var numfoos = $("#foos_container > div.foo").length + 1;
        var foo_id = numfoos + "-foo";
        var div = $("<div></div>").attr("id",foo_id).addClass("foo");

        div.appendTo("#foos_container").load("http://jsbin.com/ejalo", function() {
            div.children().each(function(){ 
                $(this).datepicker({dateFormat:"yy-m-d"}); 
            });                
        });                 
    });

});

【讨论】：

嗯，还是不行。我只是将它附加到一个 div 中，其中包含一堆需要附加日期的表单。
这段代码是在声明日期选择器脚本之前还是在document 准备好（完成加载）之前运行，即这段代码是在<body> 的底部还是在$(document).ready(function() { /* code here */ }); 的内部？
不，这是通过单击链接发起的 Ajax 调用。非常感谢您的努力！
我添加了更多上下文。 div 是新创建的。我应该改变它吗？我想我会试试看。
做到了！谢谢拉斯卡姆。

【解决方案2】：

在您的$(function(){}); 中试试这个：

$('input').filter('.datepicker').datepicker();

我认为您不需要任何其他垃圾，例如each、load 等等。只是你的 doc.ready 函数中的filter。

【讨论】：

谢谢，你们俩都有部分解决方案！