代码之家  ›  专栏  ›  技术社区  ›  SapphireSun

jquery datepicker未出现,竞争条件?

  •  0
  • SapphireSun  · 技术社区  · 15 年前

    以前,当我将datepicker应用于静态元素时,它会出现,但由于某种原因,我无法使它动态工作。在某些配置下,如果我先弹出一个警报框,它就会工作。怎么了?

    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模板。

    2 回复  |  直到 15 年前
        1
  •  1
  •   Russ Cam    15 年前

    尝试

    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 它模拟了我相信你正在努力实现的目标。添加 编辑 到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"}); 
                });                
            });                 
        });
    
    });
    
        2
  •  1
  •   Jason    15 年前

    在您的 $(function(){}); :

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

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