Question

我有以下情况：

我有一个表，当用户点击“复制”链接时，所有都有一个“复制”链接，父tr被克隆并附加到表中，现在问题是，第一次点击事件触发好了，但第二次发射两次，第三次发射三次等等，而且当我“克隆”tr时，我想将点击功能绑定到这个克隆tr的“复制”链接，任何解决方案？

我试过$（'。copy-row-link'）。unbind（'click'）。click（function（）{/ * code * /}）;

我读过类似的qns，但它们似乎没有解决我的问题

我的代码：

$(".copy-row-link").unbind('click').bind('click', function(e)
{
    var strdata = 'class="viewtext" style="background-color:#FFFFFF;" id="highlight1733" onMouseOver="highlight(\'1733\');" onMouseOut="removehighlight(\'1733\');'
    //var newTr = currTr.clone(true).addClass("viewtext").css( { "backgroundColor" : "#FFFFFF" } ).attr(;

    var id = currTr.attr("id"); // currTr is set previously
    var newId = id.replace("highlight", "");
    //alert( newId );
    newId = parseInt( newId );
    newId += 1;     
    var newTr = currTr.clone()
                    .addClass("viewtext newAddedRow")
                    .css("backgroundColor", "#FFFFFF")
                    .attr('id', "highlight" + newId.toString() )
                    .mouseover(
                        function() {                                
                            highlight( newId );
                        }
                    )
                    .mouseout(
                        function() {                                
                            removehighlight( newId );
                        }
                    );

    //newTr.appendTo( currTb );
    newTr.hide();
    newTr.insertAfter( "#" + id );
    newTr.fadeIn(100);
    newTr.attr('id', newId);
    //e.stopPropagation();
    //e.preventDefault();
    //e.stopImmediatePropagation();
    bindToTr(); // Bind to Tr calls this function again
    return false;
});

Answer 1

你说

我有一张桌子，其中有一些都有“复制”链接

...但是您的代码正在使用

$("#menu-item-copyRow")...

~~...获取复制链接。在文档中IDs cannot be duplicated，它们必须完全唯一。~~

这是一个让jQuery的新delegate功能真正真正的地方（但我们可以在早期版本中轻松模仿它;更多内容见下文）。以下是使用delegate执行此操作的独立示例（live copy）;我本来没有尝试复制你的代码，因为我想避免太复杂的事情，但是应该很容易采用这种技术并将其应用到你的代码中：

HTML：

<table id='theTable'>
  <tbody>
    <tr>
      <td><a href='#' class='copyrow'>Copy</a></td>
      <td class='descr'>This is a row in the markup</td>
    </tr>
  </tbody>
</table>

JavaScript的：

jQuery(function($) {
  var counter = 0;

  $('#theTable').delegate('a.copyrow', 'click', copyRowClick);

  function copyRowClick() {
    var $this, $tr, $clone, $desc, label, n;

    ++counter;
    $this = $(this);
    $tr = $this.parents("tr");
    $clone = $tr.clone();
    $descr = $clone.find('td.descr');
    label = $descr.text();
    n = label.indexOf(" of ");
    if (n >= 0) {
      label = label.substring(0, n);
    }
    label = "Clone #" + counter + " of " + label;
    $descr.text(label);
        $clone.insertAfter($tr);
    return false;
  }

});

（忽略label的内容，我们可以告诉我们什么是副本。）

因为要复制的元素没有处理程序，所以我们不必担心附加/分离这些处理程序。上面唯一的事件处理程序位于table元素上。

delegate是一个jQuery 1.4.2+功能，但对于早期版本，您可以通过挂钩click上的table事件然后查看{{1}来轻松模拟它}属性，看看实际点击了什么。这是（live copy）：

的方法

event.target

Answer 2

由于代码不清楚，我假设在所有行/ TR中都能找到上述函数？所以这是我的意见： 1-多次使用相同的ID，请改用class： 2-使用live方法，这样所有“new”行都将具有相同的click事件：

$(".menu-item-copyRow").live('click', function(e) {
// Code goes here
});

3-您是通过递增当前单击的ID来设置新ID吗？！

var id = currTr.attr("id"); // currTr is set previously
var newId = id.replace("highlight", "");
newId = parseInt( newId );
newId += 1;

您应该计算所有TR，以便获得新ID，如下所示：

var newID = $('tr','#myTable').length + 1;

jquery点击事件多次触发:(

2 个答案: