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

Question

我之前写的代码在旧版本的jQuery中似乎还能正常工作，直到1.4版本。但是我发现在1.4.4版本中已经无法正常工作了。即便是在1.6.2版本中仍然不行。我进行了一些调查，发现有一些类似的问题，但是没有找到需要在clone()之后更新除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>

- pixelwiz

---

欢迎来到StackOverflow！很高兴你能解决问题。让人们知道问题已经解决的最好方法是将你上次编辑的信息作为答案发布在自己的问题下，然后接受它作为答案。祝编码愉快！ - Josh Darnell

Answer 1

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

//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;     
});

- pixelwiz