調用JavaScript初始化表單的有效方法？

-1

一個經常有一些動態部件的表單，需要初始化onload。例如。 datepickers，增強的選擇，部分反覆，隱藏/顯示條件元素等調用JavaScript初始化表單的有效方法？

實施例：

<form> 
    <input type="text" name="date"> 
    <select name="selection"></select> 
</form>

，我想初始化日期選擇日期元件和選擇二選擇元件上。

在哪裏把表單初始化？

我的想法：

初始化throught全局選擇：
```
$(function() { 
    $('input[name=date]').datepicker(); 
    $('select[name=selection]').select2(); 
})`. 
```
但我對整個Web一個js文件，所以這將導致在每個頁面加載爬行整個DOM ，即使該元素在當前頁面上不存在。
某種條件選擇器。例如。給<body>和ID，並添加到我的全球js文件是這樣的：$(function() { $('input[name=date]', 'body#foo').datepicker(); })
封裝每種形式的初始化成一個函數（或類的方法），並調用從HTML功能：
```
<script type="text/javascript"> 
    $(document).ready(initMyForm()); 
</script> 
```

但我猜測，沒有更好的方法嗎？你會建議什麼，特別是對於需要不同的JavaScript初始化的多種不同形式的大型項目？

來源

2013-02-17 Ondrej Machulda

僅供參考，'。就緒（initMyForm（））;'應該是'。就緒（initMyForm）;' – 2013-02-17 21:25:17

把它放在同一地點無論生成動態元素 – 2013-02-17 21:31:45

如果對於您當前的項目，您正在運行一個JS文件，或者甚至對於「通用」表單設置功能適當的中型項目，則使用您所描述的函數將是適當的。

請參閱下面的示例，將函數封裝爲小型jQuery插件，以便您可以根據需要在特定選擇器上調用此函數，以避免貫穿整個DOM。

;(function($){ 
    $.extend({ 
     initMyForm : function(){ 
      $(this).find('input[name=date]').datepicker(); 
      $(this).find('select[name=selection]').select2(); 
     } 
    }); 
})(jQuery);

所以，你可以使用此類似：

$(document).ready(function(){ 
    $(body).find(form).initMyForm(); 
}); 

$("#my-form").initMyForm(); 

$(".page-content .form").initMyForm();

來源

2013-02-17 22:28:07

調用JavaScript初始化表單的有效方法？

回答

相關問題