jQuery：如何在创建时自动将元素转换为UI小部件？

Question

我有一个表单，我在其中使用jQuery/JavaScript添加新的日期字段元素。我试图附加jQuery的datepicker到该日期字段输入（任何部件/行动将具有相同的行为）。

<script> 
$(function() { 
    $(".datepicker").datepicker(); 
}); 
</script> 

<p>Date: <input type="text" class="datepicker"></p> 

如果元素出现在页面的原始html中，那么datepicker小部件会绑定到日期字段。但是，如果相同的日期字段被即时添加，日期选择器小部件不起作用。为了点击等等，jquery提供了'live'功能，它可以在一个对象被创建后附加一个动作。但是，我怎样才能模仿datepicker的相同行为，以便它在“创建对象之后”被附加？

Answer 1

如果你添加上飞的元素，只需拨打.datepicker()它在飞行呢！

当然，你必须知道在你创建他们，他们将是迄今编辑字段的时间，所以它应该是微不足道的，直接使在同一时间的小工具，如：

var field = $('<input type="text" class="datepicker">').appendTo(page); 
$(field).datepicker(); 

即只需使用您刚刚创建的元素的选择器，并按照您在$(document).ready()函数中为预先创建的元素所做的相同方式呼叫.datepicker()即可。

我在http://jsfiddle.net/sDHzG/上进行了一个工作演示。

请注意，新元素不必具有特定的类（除非您想要其他原因） - 对.datepicker()的调用可以使用DOM元素（按照我的示例）。

Answer 2

这听起来像你想要的东西像Live Query插件，它可以匹配基于选择器的新元素，并执行代码，如你所愿。

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

Answer 3

当您的元素被添加到页面时，您可以引发一个事件，并使用jQuery live绑定该事件。

$(document).ready(function { 
    $("#form").live("datePickerCreated", function() { 
    $(this).datepicker(); 
    }); 
}); 

function CreateDatePicker(id) { 
    datepickercode = '<p>Date: <input type="text" class="datepicker"></p>'; 
    jQuery("#form") 
    .append(datepickercode) 
    .trigger("datePickerCreated"); 
}