在页面加载后动态添加 jquery 日期选择器

Add jquery datepicker dynamically after page load

本文关键字：添加 jquery 日期 选择器 动态 加载      更新时间：2023-09-26

点击按钮后，我有一些jquery，它将向"body"元素添加一些html。 在该 html 中，我有一个日期选择器输入字段，它拒绝在应该出现时出现。

我在应用程序的其他几个位置使用 ui-datepicker，它运行良好。

我尝试在文档加载时调用日期选择器：

jQuery ->
  $('.my-datepicker-class').each ->
    input = $(this)
    input.datepicker()

在将新 HTML 添加到页面的点击事件之后： 

$('.my-button').click ->
  $('body').ipadoverlay
    titleStyle: false
    contentWidth: 500
    topSpc: true
    content: $('#popup-for-' + thing_id).html()
  $('.my-datepicker-class').each ->
    input = $(this)
    input.datepicker()

但拣货员拒绝出现。 我的猜测是，这与jquery何时构建和放置日期选择器有关，但我真的不知道。

如果您有任何想法或可以使用更多信息，请告诉我。

更新我更改了调用 datepicker（） 的方式，以便它仅适用于我希望日期选择器附加到的元素。

$('.ipadoverlay .date-picker').datepicker()

这消除了 .each => 的第一个问题。
现在它默默地失败了。 没有错误或警告。 日期选择器根本不显示。

我将开始深入研究jquery.ui.datepicker.js看看我是否可以弄清楚发生了什么，但是如果您对日期选择器无法响应的原因有任何想法，请告诉我。

更新 2好的，我更进一步。 类'hasDatepicker'已经附加到我想要添加日期选择器的元素上（这意味着$（'.date-picker'）.datepicker（）在其他地方被调用，而元素是隐藏的和未使用的），但是日期选择器不起作用。 我通过从我的元素中删除类并再次调用 .datepicker（） 来解决此问题

$('.ipadoverlay .date-picker').removeClass('hasDatepicker')
$('.ipadoverlay .date-picker').datepicker()
现在，日期选择

器在单击时显示，但选择日期不会执行任何操作... 帮助将不胜感激

你需要使用胖箭头。 您对"this"的使用会失去其上下文。

jQuery ->
  $('.my-datepicker-class').each => # <-- Fat arrow
    input = $(this)
    input.datepicker()

我会解释，但 coffeescript.org 做得比以往任何时候都好。

相关文章：