我有一个表单设置,显示为一个jQuery UI对话框。许多元素都有与之相关联的javascript,它们可以操纵表单上的其他对象。因此,例如,我可能会有类似以下内容:
$('#empNumber').change(function(){
$.getJSON('getEmpInfo',{...},function(response){
$('#empName').val(response.empName);
...
}
})
当输入员工编号时,当然会填充员工姓名(和其他信息)。
我现在想在页面的第二个位置显示相同的表单(在视觉上,它是与访问对话框不同的选项卡,但是从HTML角度来说,它只是一个不同的div),作为不同形式的子元素而不是单独显示。
考虑到所有内容都是模板,我的第一个想法就是将表单简单地包含在需要的第二个位置。但是现在我有一个问题:所有ID都重复了。这不仅是不好的做法,而且还会破坏上面的代码。
所以,基本上,我需要我的表单和关联的javascript的两个副本。一个显示为独立对话框,第二个显示为另一个对象的子级。我当然可以更改所有的ID,但是随后我还必须同时拥有两个代码副本,这充其量只会令人讨厌。那么最好的解决方案是什么?
最佳答案
如果您希望在同一页面上使用多个ID,就应该不使用ID。改用类:
$('.empNumber').change(function(){
$.getJSON('getEmpInfo',{...},function(response){
$('.empName').val(response.empName);
...
}
})
另外,您将需要修改代码,以便所有选择器都是独立的,并且不会在页面的其他部分引起问题。通常我会做这样的事情:
var initializeForm = function($el) {
// all selectors will be within the `.myFirstForm` or `.mySecondForm` wrappers
$el.find('.empNumber').change(function(){
$.getJSON('getEmpInfo',{...},function(response){
$el.find('.empName').val(response.empName);
...
}
});
}
initializeForm($('#myFirstForm'));
initializeForm($('#mySecondForm'));