1

PS：之前有两个答案，我刷新这个页面，答案消失了，这是怎么回事？

演示：jsbin 中的演示

html

<table>
<tr class='test_tr'>
  <td>
    <select class='test_select'>
      <option value=1>test1</option>
      <option value=2>test2</option>
      <option value=3>test3</option>
    </select>
  </td>
  <td><a href="#" class='test_clone'>clone</a></td>
</tr>

js

$(document).ready(function(){
  $('select.test_select').selectmenu();
  $('.test_clone').click(function(){
    var tp = $(this).parents('.test_tr');
    var new_tr = tp.clone(true);
    new_tr.insertAfter(tp);
    tr_func(new_tr);
  })
});
  function tr_func(new_tr){
     $('.test_select',new_tr).selectmenu();
  }

单击克隆按钮并单击新选择后，它始终影响到第一个。有什么建议吗？谢谢！

4

4 回答 4

1

这个问题有几个有趣的方面：

  1. 克隆行时，所有具有id属性的项目也将被克隆，导致两个元素具有相同的#ID; 这不好。它可以通过创建一个原始示例行来解决，每次您单击按钮时都会克隆该示例行，然后您必须先“装饰”才能使用它（即应用.selectmenu()和单击处理程序）。

  2. 克隆a 时<select>，它不会保留所选选项。您必须保存该selectedIndex属性并将其应用于克隆版本。

解决的两个问题如下所示：

  $(document).ready(function() {
    // keep reference to the sample row
    var sample = $('.test_tr.sample');
    // click handler for the clone button
    function cloneRow()
    {
      var parentRow = $(this).parents('.test_tr'),
          selectedOption = parentRow.find('.test_select').prop('selectedIndex');

      setupRow(newRow().insertAfter(parentRow), selectedOption);
    }

    // decorates the new row and sets the correct selected option before applying
    // selectmenu()
    function setupRow(row, selectedOption)
    {
      row
        .find('.test_select')
          .prop('selectedIndex', selectedOption || 0)
          .selectmenu()
          .end()
        .find('.test_clone')
          .click(cloneRow)
          .end()
    }

    // helper function that clones the sample and shows it before handing it over
    // to other code.
    function newRow()
    {
      return sample.clone().show();
    }

    // setup the first row
    setupRow(newRow().appendTo('table'));
  });

演示

于 2012-12-04T07:13:25.100 回答
1

这是我想出的，更少的代码，没有外部功能。

$('select.test_select').selectmenu();
$('.test_clone').on('click', function(){
    var $row = $(this).parents('.test_tr');  //get parent tr row
    var $select = $row.find('.test_select'); //get select box
    var selectedIndex = ($select.prop('selectedIndex') || 0); //copy current selectedIndex
    $select = $select.clone(false); //clone select box, withDataAndEvents = false
    $select.prop('selectedIndex', selectedIndex);  //apply selectedIndex
    $select.removeAttr('id'); //remove id as selectmenu will apply the correct id
    var $tbody = $row.parent();
    var $newrow = $row.clone(true); //clone row, withDataAndEvents = true
    $('td:first', $newrow).empty(); //empty the first td
    $('td:first', $newrow).append($select); //append cloned select box
    $tbody.append($newrow); //append row to table
    $('.test_select', $newrow).selectmenu(); //apply jquery.ui.selectmenu
});

演示

于 2012-12-04T08:54:26.560 回答
0

生成的所有克隆选择框都具有相同的 id。那是无效 DOM 结构的一个例子。

可能这就是导致始终打开第一个选择菜单的原因，其中任何一个都被单击。

于 2012-12-04T07:23:18.733 回答
0

必须可能当你这样做时clone()，它也会克隆菜单小部件元素，因此会产生奇怪的行为。我尝试更新您的代码以从模板元素克隆并且它有效。

http://jsbin.com/onozeh/1/edit

于 2012-12-04T07:54:59.617 回答