1

PS: 前に 2 つの回答がありました。このページを更新すると、回答が消えました。何が起こっているのですか?

demo: 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

これが私が思いついたもので、コードが少なく、外部関数はありません。

$('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 に答える
1

この問題には、いくつかの興味深い側面があります。

  1. 行が複製されると、属性を持つすべてのアイテムidも同様に複製され、2 つの要素が同じになり#IDます。それは良いことではありません。これは、ボタンをクリックするたびに複製される元のサンプル行を作成することで解決できます。これは、使用する前に「装飾」する必要があります (つまり、適用.selectmenu()してハンドラーをクリックします)。

  2. を複製する<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 に答える
0

生成されたクローン選択ボックスはすべて同じ ID を持ちます。これは無効な DOM 構造の例です。

それが常に最初の選択メニューを開く原因であり、それらのいずれかがクリックされる可能性があります。

于 2012-12-04T07:23:18.733 に答える
0

おそらく、 を実行するclone()と、メニュー ウィジェット要素も複製されるため、奇妙な動作が発生するはずです。テンプレート要素から複製するようにコードを更新しようとしましたが、うまくいきました。

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

于 2012-12-04T07:54:59.617 に答える