【问题标题】:Add jquery datepicker dynamically after page load页面加载后动态添加jquery datepicker
【发布时间】:2013-11-08 20:38:37
【问题描述】:

单击按钮后,我有一些 jquery 将向“body”元素添加一些 html。在那个 html 中,我有一个 datepicker 输入字段,它在应该出现的时候拒绝出现。

我在我的应用程序的其他几个地方使用了 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() 的方式,使其仅适用于我希望将 datepicker 附加到的元素。

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

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

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

更新 2 好吧,我又进了一步。 'hasDatepicker' 类已经附加到我想要添加 datepicker 的元素(这意味着 $('.date-picker').datepicker() 正在其他地方被调用,而元素被隐藏且未使用),但是日期选择器没有工作。我通过从元素中删除类并再次调用 .datepicker() 来解决此问题

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

现在日期选择器会在点击时显示,但选择日期不会做任何事情......非常感谢帮助

【问题讨论】:

    标签: javascript jquery coffeescript datepicker jquery-ui-datepicker


    【解决方案1】:

    您需要使用粗箭头。您对“this”的使用失去了它的上下文。

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

    我会解释,但 coffeescript.org 做得比我做得更好。

    【讨论】:

    • 优秀。谢谢@mattmc3 这当然让我进入了下一步!现在我从 jquery.ui.datepicker.js:145 _attachDatepicker: function(target, settings) { var nodeName, inline, inst; nodeName = target.nodeName.toLowerCase(); 收到一个错误,错误:Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-11-23
    • 1970-01-01
    • 1970-01-01
    • 2017-11-22
    • 2013-01-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多