Javascript jQuery clone（）与attr（）方法一起使用时出现问题

我使用jQuery clone（）方法克隆表行，然后使用attr（）方法更改某些字段的名称/id。这一切都很好，如果我使用“view generated source”，名称/ID设置正确，但是当生成的内容触发JavaScript事件时，它会像父元素一样触发它。例如，我有一个名为/id“slast1”的元素，它应该触发autocomplete方法（基于它是“slat”类的一部分这一事实），并且可以正常工作。不幸的是，当我在生成的行中单击同一个元素（在本例中，元素id/名称为“slast2”）时，它会触发autocomplete方法，但其行为就好像它是从父元素“slast1”触发的一样。我似乎找不到解决这个问题的方法，我认为这可能是使用clone（）方法的一个限制，但我希望我只是错过了一些东西

function fnAddRow(iRow)
{
  var iNewRow = iRow+1;
  $("#tblAuthors tr:last").clone(true).insertAfter("#tblAuthors tr:last");
  $("#tblAuthors tr:last #slast"+iRow).attr("name", "slast"+iNewRow);
  $("#tblAuthors tr:last #slast"+iRow).attr("id", "slast"+iNewRow);
  $("#slast"+iNewRow).val("");
}

如上所述，上面的代码克隆了表行并更改了属性。下面的代码是由“slastX”元素中的“keydown”事件触发的，但不管出于何种原因，生成的元素都被视为父元素

  $(function()
  {
    var aEmps = 
    [
<?php
echo $sEmps;
?>    
    ];

    $(".slast").bind( "keydown", function( event ) {
      if ( event.keyCode === $.ui.keyCode.TAB &&
          $( this ).data( "autocomplete" ).menu.active ) 
          { event.preventDefault();}
    })
    .autocomplete({
      source: aEmps,
      close: function(event, ui)
      {
        // Split return value and store in array
        var aName = this.value.split(", ");
        // Get row #
        var iRow = this.name[this.name.length-1];
        // Populate values        
        $("#slast"+iRow).val(aName[0]);
        $("#sfirst"+iRow).val(aName[1]);
        $("#smi"+iRow).val(aName[2]);
      }
    });
  });

$（函数（）
{
var aEmps=
[
];
$（“.slat”）.bind（“keydown”，函数（事件）{
如果（event.keyCode===$.ui.keyCode.TAB&&
$（此）.data（“自动完成”）.menu.active）
{event.preventDefault（）；}
})
.自动完成({
资料来源：aEmps，
关闭：功能（事件、用户界面）
{
//拆分返回值并存储在数组中
var aName=this.value.split（“，”）；
//吵架#
var iRow=this.name[this.name.length-1]；
//填充值
$（“#slast”+iRow）.val（aName[0]）；
$（“#sfirst”+iRow）.val（aName[1]）；
$（“#smi”+iRow）.val（aName[2]）；
}
});
});

---

正如您所看到的，自动完成方法应该由任何带有“slast”类的东西触发，但由于某些原因，我无法理解$（这）总是=父对象（'slast1'），而不是“slast2”或任何其他生成的内容。

使用而不是

绑定

，这应该可以为您解决问题。

当您使用

.clone（true）时

您正在处理所有

数据（）

以及绑定到该元素的所有事件。这导致了你的问题

如果您将事件绑定切换为使用

.delegate（）

（或

.live（）

），您应该能够解决触发事件的问题

var autoCompleteOptions = {
  source: aEmps,
  close: function(event, ui)
  {
    // Split return value and store in array
    var aName = this.value.split(", ");
    // Get row #
    var iRow = this.name[this.name.length-1];
    // Populate values        
    $("#slast"+iRow).val(aName[0]);
    $("#sfirst"+iRow).val(aName[1]);
    $("#smi"+iRow).val(aName[2]);
  }
};

$("#tblAuthors").delegate("tr .slast", "keydown", function(event){
    if ( event.keyCode === $.ui.keyCode.TAB && 
          $( this ).data( "autocomplete" ).menu.active ) { 
     event.preventDefault();
   }
}).autocomplete(autoCompleteOptions);


function fnAddRow(iRow)
{
  //....stuff.....
  $("#tblAuthors tr:last #slast"+iRow).autocomplete(autoCompleteOptions);
  //....stuff.....
}

通过使用委托，您将事件绑定到

$（“#tblAuthors”）

，而不是直接绑定到

.slat

另外，在这方面，使用

delegate

可能也能获得一些性能

---

更新：Mark和我反复讨论了解决方案，最后的代码是：

这是一个有用的工具，您可能会发现它在查看绑定到各种元素的事件处理程序方面很有用，它作为一个bookmarklet工作，我发现它有时非常宝贵

---

在您的情况下，它应该让您看到哪些处理程序绑定到克隆行（如果有的话）。

非常出色的响应，非常感谢您花时间将其组合在一起。奇怪的是，firebug一直抱怨.delegate（）不是函数。我正在使用jQuery1.5.1和jQueryUI1.8.11——我遗漏了什么？@Nicholas，奇怪。下面是一个关于使用

delegate（）

Mark:Oy的JSFIDLE示例，我引用的jQuery副本（在我们的公共脚本区域）是1.4。现在参考1.5.1，不再出现错误。不幸的是，我无法启动事件。我已经在这里复制并粘贴了相关代码：--我缺少了什么？@Nicholas看起来

委托（）

代码在

$（文档）之外。ready（）

，这是粘贴中的打字错误吗？如果没有，请尝试将该代码放在domready@Nicholas，试试这个。它适用于当前行和添加的行。（由于某种原因，前一行的autocomplete出现问题，可能需要回答另一个问题）希望这能帮助您解决问题。我一直交叉着眼睛想弄清楚到底发生了什么！我将bind（）更改为live（），因此我的事件触发器看起来像：$（“.slat”）.live（“keydown”），function（event）{….并且我没有看到结果中的任何差异。我缺少什么？