Question

只是一个简单的问题，但我似乎无法将插件函数绑定到克隆的实时元素。

$('.add-another').live('click', function()
{
   var self = $(this);
   var clonedElement = self.parents('.row').clone();

   clonedElement.find('input.datepicker').bind('click', function()
   {
       $(this).datepick({ rangeSelect: true });
   });
});

我正在使用this插件（我没有使用jQueryUI，也没有使用datepicker）。那么如何将插件函数绑定到克隆/实时元素呢？

编辑：这是jsFiddle demo。

Answer 1

你绑定了一个id（#add-another）。该标准规定，任何时候都只能有一个具有给定ID的元素。

所以，这不会像预期的那样真正起作用。将id更改为类（即＃to an。）并再次尝试：）

另一个可能的问题可能是HTML根本没有你期望的结构，而且有些查询失败了。如果您发布HTML结构，我们可以调试它：）

修改：您绑定了“click”事件，这实际上是错误的 - 您可以在创建HTML元素的同时创建日期选择器。

这是新代码：

$('.row input.datepicker').datepick({ rangeSelect: true }); $('span.add-another').live('click', function() { var self = $(this); var clone = self.parents('.row').clone(); $('input.datepicker', clone).datepick({ rangeSelect: true }); $(clone).insertAfter(self.parents('.row')).hide().slideDown('fast'); self.remove(); });

另外，我有一个坏消息 - datepicker插件坏了:)
datepicker本身似乎只能在页面上显示一个日期选择器您应该研究如何显示几个，或者只使用jQueryUI。

如您所见，此处只有原始对象具有日期选择器：http://jsfiddle.net/qZn8d/7/ 此处只有第一个添加的对象具有日期选择器：http://jsfiddle.net/qZn8d/6/

所以，是的，插件坏了，抱歉：）

Answer 2

您正在尝试将函数绑定到尚未在DOM中的克隆对象。将其插入dom

OR

使用live而不是使用克隆对象绑定

将jQuery插件绑定到live元素

2 个答案: