jQuery Datepicker 在动态元素中不起作用

Posted 2023-05-07

【中文标题】jQuery Datepicker 在动态元素中不起作用

【英文标题】：jQuery Datepicker does not work in dynamic element

【发布时间】：2013-08-02 20:51:24

【问题描述】：

我有问题。 jQuery Datepicker 不能以动态形式工作，因此您无法选择日期。这是我的演示链接http://gestionale.odoyabooks.com/sum.php。

javascript：

<script>
$(document).ready(function() 
    $('.input_date').on('click', function() 
    $(this).datepicker('destroy').datepicker(showOn:'focus').focus();
        );
);
</script>

html：

<form action="" method="POST">

<div class="yes">
    <div id="cost1" class="clonedCost" style="display: inline;">
        <table  border="0">
          <tr>          
            <td><label class="date" for="date">Date</label></td>
          </tr>
          <tr>
            <td><input class="input_date" id="date" type="text" name="date[]" /></td>
          </tr>
        </table>
    </div>
    <div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>
</div>

</form>

【参考方案1】：

问题是最初绑定事件时，新字段不存在。

通过将 on click 应用到 body，使用选择器 .input_date，它应该将事件附加到动态表单中的新元素。

$(function() 
    $('body').on('click','.input_date', function() 
        $(this).datepicker('destroy').datepicker(showOn:'focus').focus();
    );
);

Working Example

---

更好的方法：

您应该在创建元素时初始化字段的日期选择器。

$(function() 
    $('.input_date').datepicker();
);

function createNewDatepickerInput() 
    var $newInput = $('<input type="text" name="date123" class="input_date" />');
    $newInput.appendTo("form").datepicker();

Working Example

【讨论】：

我认为你把事情复杂化了。不明白为什么要销毁，重新初始化，点击输入框后对焦……

@Webberig - 我没有改变里面的代码。我刚刚更改了事件绑定，因为我认为这就是问题所在。

我相信最好保持 OPs 代码不变。尽管在评论中提及任何缺陷有助于该人了解他可能做错了什么

我在此提到 OPs 代码 + 您的回答过于复杂。您只需要在创建输入字段后调用 datepicker()，而不是像点击事件那样搞乱......

谢谢！对我有用！ Chrome & FF :)

【参考方案2】：

我不明白您为什么要销毁/重新初始化日期选择器。 您只需在创建元素后调用 .datepicker() 即可。例如：

function createInput() 
    $('<input type="text" name="date" />').appendTo("form").datepicker();

编辑： 这是一个演示：http://jsfiddle.net/xEmJu/