我有一个表单设置,显示为一个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'));

09-11 07:17
查看更多