Question

更新：我正在使用的.click以及评论中的.find方法，都将.hasDatepicker类添加到输入中。但它没有显示日期选择器。

Update2：日期选择器正在显示但是大约1000px太高了。它似乎是datepicker函数如何抓取它的坐标。当它隐藏在success or complete调用的ajax部分时，它无法正常工作。我必须在单独的脚本中抓取x,y顶部的ajaxComplete输入。确实得到了正确的坐标。请参阅下面的答案。

如果我使用页面加载时的输入，则jQuery Datepicker 有效。

但如果我通过Ajax引入它，它就不起作用。

这是我目前的html设置：

<body> <select id="product_selector">Options</select> <div id="targetdiv"></div> </body>

ajax带来了一堆输入（它们周围没有表单元素），特别是（追加到#targetdiv）的那个应该是 DatePicker 就是这个：

<input type="text" class="datepicker" name="cmdz_end_date" id="cmdz_end_date" placeholder="End Date">

到目前为止当我点击ajax交付输入时，我可以使用console.log但是我无法显示日期选择器。这是我到目前为止的JS：

jQuery(document).ready(function($) { $('#product_selector').on('change', function() { var product = this.value; $.ajax({ type: 'POST', url: "<?php echo admin_url('admin-ajax.php'); ?>" , data: {"action": "manual_transaction_form_select", "product": product}, complete: function(){ //$( ".datepicker" ).datepicker(); }, success: function(data){ add_html_to_page(data); $('#targetdiv').html(data).find('.datepicker').datepicker(); // $('#targetdiv').on("click", ".datepicker", function(event) { // console.log('click'); // $( ".datepicker" ).datepicker(); //}); } }); }); function add_html_to_page(data){ $('#targetdiv').empty().append(data) } });

我尝试在'完成'和'成功'中使用.datepicker无济于事。这可能是因为我没有正确定位它，但我不知道如何到达那里。在.on（“点击”它注册到控制台，但它不会使该字段使用.datepicker

WP版本：3.8

对此有任何见解将不胜感激。

Answer 1

请改用此代码：

success: function(data){ 
    add_html_to_page(data, function(){
        $('#targetdiv datepicker').datepicker();
    });
}

这样.datepicker()将成为您add_html_to_page()的回调，只有在完成后才能运行

编辑：

如果上一个没有用，我想这是因为回调没有放在正确的地方，请你试试这个代码：

    success: function(data){ 
        add_html_to_page(data);
    }

和

function add_html_to_page(data){
    $('#targetdiv').html(data, function(){
        $('#targetdiv datepicker').datepicker();
    });
}

Answer 2

以下是最终为我工作的日期选择器显示在正确的位置。最初jquery datepicker可能正在显示，但由于<select>位于页面顶部，因此无法看到它。如果我将代码放入ajax成功或完成主脚本，那么$('#cmdz_end_date).offset()将返回一个与<select> offset()

基本相同的错误值

如果有人能够告诉我为什么会这样，我会非常感激。

jQuery(document).ajaxComplete(function(event, request, settings) {
    var xy = jQuery('#cmdz_end_date').offset();
    jQuery('#cmdz_end_date').datepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: xy.top,
                    left: xy.left
                });
            }, 0);
        }
    });
});

ajax中的日期选择器返回了html内容

2 个答案: