jquery - 将 jQuery Datepicker 添加到动态添加的 <input>

Question

我有一个在 Controller 中创建表单的方法:

...
sbReturn.Append(String.Format("<p id='planSetupAddNewEffectiveDate'>"));
sbReturn.Append(String.Format("<label for='txtPlanSetupAddNewEffectiveDate'>Effective Date </label>"));
sbReturn.Append(String.Format("<input type='text' id='txtPlanSetupAddNewEffectiveDate' class='plansetupdate' />"));
sbReturn.Append(String.Format("</p>"));
...

有没有办法将日期选择器附加到该文本字段？

我已经尝试过标准

$(".plansetupdate").datepicker();

和

$("#txtPlanSetupAddNewEffectiveDate").datepicker();

但两者都没有实际生成日期选择器。我知道当从动态添加的控件(即按钮)捕获事件时，使用 .live (即 xxx.live('click', function()...)，这种情况是否有类似的东西？

Answer 1

您可以使用.liveQuery() plugin for this ， .live() 没有完全替换它，您的案例就是一个很好的例子，您可以这样做以获得您想要的结果:

$(".plansetupdate").liveQuery(function() {
  $(this).datepicker();
});

原因:它当前不起作用的原因是，当您执行 $(".plansetupdate").datepicker(); 时，它所做的是这样的:

• 查找类为planetsupdate的所有元素
• 在其上制作日期选择器

但是...您的元素在运行时无法找到，它是稍后添加的。 .liveQuery() 继续查看。或者，如果您通过 $.ajax() 加载此内容，您可以将它们安装在您的成功或完整处理程序中，如下所示:

$.ajax({
  //Stuff
  success: function(data) {
     $(".plansetupdate", data).datepicker();
  }
});

这将在返回的数据中查找 .planetsupdate 元素以添加新的日期选择器。