jQuery 克隆函数后更新子元素的属性

Question

我有一些代码似乎可以在旧版本的 jQuery 上正常工作，我认为直到 1.4 为止。我注意到它在 1.4.4 中肯定停止工作。并且仍然不适用于 1.6.2。我做了一些研究，在这个问题上有一些类似的问题，但我还没有找到一个场景，在执行克隆（）之后，除了 id 之外还需要更新其他内容。

有谁知道我如何重写它以便它可以与当前版本的 jQuery 一起使用？

 //Add dynamic Shot handling
$('#link_addShot').click(function() {
  var cloned = $('#tbl_shots tbody tr:last').clone(true);
  prevNum = numOfShots;
        numOfShots = numOfShots + 1;
  $('#shot_number_' + prevNum, cloned).attr('name', 'shot_number_' +  numOfShots);
        $('#shot_type_id_' + prevNum, cloned).attr('name', 'shot_type_id_' +  numOfShots);
        $('#player_id_' + prevNum, cloned).attr('name', 'player_id_' +  numOfShots);

        $('#shot_number_' + prevNum, cloned).attr('id', 'shot_number_' +  numOfShots);
        $('#shot_type_id_' + prevNum, cloned).attr('id', 'shot_type_id_' +  numOfShots);
        $('#player_id_' + prevNum, cloned).attr('id', 'player_id_' +  numOfShots);
  $('#removeLink', cloned).html('<a href="#">Remove</a>');
  $('#removeLink a', cloned).click(function() {
    $(this).parent().parent().parent().remove();
    return false;
  })

  $('#shot_type_id_' + numOfShots, cloned).val(0);
        $('#player_id_' + numOfShots, cloned).val(0);

  $('#tbl_shots').append(cloned);
  $(this).removeClass('form_button_hover');
  return false;     
});

    //remove link handling
    $(".link_remove").click(function() {
        $(this).parent().parent().parent().remove();
        return false;
    });

哦，如果我包含我试图克隆的 tr 标记，它可能会有所帮助：

<tr>
<td><input id="shot_number_5" type="hidden" value="" name="shot_number_5">
<select id="shot_type_id_5" class="shot_type_id" name="shot_type_id_5">
  <option value="0">Unknown</option>
  <option value="1">Tee</option>
  <option value="2">Fairway</option>
  <option value="3">Rough</option>
  <option value="4">Bunker (fairway)</option>
  <option value="8">Bunker (greenside)</option>
  <option value="5">Fringe</option>
  <option selected="selected" value="6">Green</option>
  <option value="7">Penalty</option>
  <option value="9">Concede</option>
  <option value="10">Pick Up</option>
</select></td>
<td class="td_last" align="center"><div id="removeLink"> <a class="link_remove" href="">Remove</a> </div></td>
</tr>

Answer 1

好的，如果其他人正在寻找类似的东西，找到了解决方案。我认为这既是一个逻辑问题，也是一个语法问题。但不确定我是否真的需要更改语法。逻辑问题是 prevNum 实际上不正确，所以我将其更改为使用 find() 函数，并在 ID 后添加通配符，因为我知道克隆元素中只有其中一个。

//Add dynamic Shot handling
$('#link_addShot').click(function() {
numOfShots = numOfShots + 1;
var cloned = $('#tbl_shots tbody tr:last').clone(true);
cloned.find('#[id*=shot_number_]').attr('id', 'shot_number_' +  numOfShots).attr('name','shot_number_' +  numOfShots);
cloned.find('#[id*=shot_type_id_]').attr('id', 'shot_type_id_' +  numOfShots).attr('name','shot_type_id_' +  numOfShots).val(0);            
cloned.find('#[id*=player_id_]').attr('id', 'player_id_' +  numOfShots).attr('name','player_id_' +  numOfShots).val(0);
cloned.find('.removeLink').html('<a href="#">Remove</a>');
cloned.find('.removeLink a').click(function() {
$(this).parent().parent().parent().remove();
return false;
});

$('#tbl_shots').append(cloned);

$(this).removeClass('form_button_hover');
return false;     
});