Question

我有一个表单设置，显示为jquery UI对话框。许多元素都有与之关联的javascript，它们操纵表单上的其他对象。因此，举例来说，我可能会有以下内容：

$('#empNumber').change(function(){
    $.getJSON('getEmpInfo',{...},function(response){
        $('#empName').val(response.empName);
        ...
    }
})

当输入员工编号时，当然会填充员工姓名（和其他信息）。

我现在想要在页面的第二个位置显示相同的表单（在视觉上它是一个不同的选项卡，而不是访问对话框的位置，但HTML明智地它只是一个不同的div），作为不同形式的孩子而不是通过它自己。

考虑到一切都是模板，我的第一个想法就是将这个表单简单地包含在我需要它的第二个位置。但现在我遇到了一个问题：所有的id都是重复的。这不仅是不好的做法，还会破坏上面的代码。

所以，基本上，我需要两份我的表格和相关的javascript副本。一个显示为独立对话框，另一个显示为另一个对象的子视图。当然，我可以更改所有的ID，但是我必须有两个代码副本，这将是最烦人的。那么什么是最好的解决方案呢？

Answer 1

如果您希望在同一页面上有多个ID，则不应使用ID。改为使用类：

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'));

此外，您需要修改代码，以便所有选择器都是自包含的，并且不会在页面的其他部分引起问题。通常我会做这样的事情：

{{1}}

Answer 2

你可以将它们放在一个具有唯一id的div中，然后使用css选择器作为后代，选择它们是唯一的。

说我有

<div id="form1"> 
<input class = "empNumber" />
</div>
<div id="form2"> 
<input class = "empNumber" />
</div>

然后使用$('#form1 .empNumber')选择第一个。

没有ID冲突的HTML重复表单

2 个答案: