jQuery：如何在創建時自動將元素轉換爲UI小部件？

我有一個表單，我在其中使用jQuery/JavaScript添加新的日期字段元素。我試圖附加jQuery的datepicker到該日期字段輸入（任何部件/行動將具有相同的行爲）。jQuery：如何在創建時自動將元素轉換爲UI小部件？

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

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

如果元素出現在頁面的原始html中，那麼datepicker小部件會綁定到日期字段。但是，如果相同的日期字段被即時添加，日期選擇器小部件不起作用。爲了點擊等等，jquery提供了'live'功能，它可以在一個對象被創建後附加一個動作。但是，我怎樣才能模仿datepicker的相同行爲，以便它在「創建對象之後」被附加？

來源

2011-03-18 Neo

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

當然，你必須知道在你創建他們，他們將是迄今編輯字段的時間，所以它應該是微不足道的，直接使在同一時間的小工具，如：

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

即只需使用您剛剛創建的元素的選擇器，並按照您在$(document).ready()函數中爲預先創建的元素所做的相同方式呼叫.datepicker()即可。

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

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

來源

2011-03-18 19:33:08 Alnitak

我會淘汰一個jsfiddle - 給我5分鐘 – Alnitak 2011-03-18 19:43:44

從來沒有想到這一點。我會嘗試將其適應於我自己的場景。 – Neo 2011-03-18 19:44:49

我的情況比這更復雜一點。我正在創建一個拖放式UI。實際的用戶界面是在另一個jquery-ui-tab中爲了「預覽」目的而使用ajax重新創建的，而不需要加載完整的頁面。那就是我需要日期選擇器小部件的地方，而不是在拖放式頁面本身。 – Neo 2011-03-18 20:10:57

這聽起來像你想要的東西像Live Query插件，它可以匹配基於選擇器的新元素，並執行代碼，如你所願。

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

來源

2011-03-18 19:31:01

Livequery插件是否與最新版本的jquery兼容。最後一個livequery發佈於2009年1月發佈。 – Neo 2011-03-18 20:17:35

@Neo老實說我不知道，但[項目託管的github頁面]（https://github.com/brandonaaron/livequery）最後更新於2010年2月。 – 2011-03-18 20:21:43

當您的元素被添加到頁面時，您可以引發一個事件，並使用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"); 
}

來源

2011-03-18 19:39:44 Martin

或'CreateDatePicker'直接調用'.datepicker（）'... – Alnitak 2011-03-18 19:57:43

jQuery：如何在創建時自動將元素轉換爲UI小部件？

回答

相關問題