0

我有这些输入字段，当单击“编辑”按钮时，我正在使用 jQuery 进行克隆，这样我可以更好地操作编辑显示，但我需要将用户输入引用到原始输入，这样当他们完成编辑时，原始输入字段将包含他们输入的值。

所以考虑这个简单的html：

<div class="wrapper">
     <div class="settings" style="display:none;">
          <label>Title</label><input type="text" name="title" value="" />
          <label>Text</label><input type="text" name="text" value="" />
     </div>
     <a href="#" class="edit">Edit Fields</a>
</div>

所以这是我的初始表单，设置在页面加载时隐藏。只有当用户单击编辑字段按钮时才会出现设置，但我希望它出现在模态灯箱内，这就是我克隆它们以进行显示操作的原因。

$('.edit').click(function() {
     var cloned = $('.wrapper .settings').clone(true, true),
         popup = $('<div class="popup"></div>');

     popup.append(cloned);
     $('body').append(popup);
});

好的，所以我已经使用正确的设置信息制作模式弹出窗口，但我不确定用户输入的值将如何填充到原始字段中。这就是为什么我问jQuery克隆函数是否可以做引用类型复制。

还是有更好的方法来做到这一点？

4

1 回答 1

0 
$('.edit').on('click', function(e) {
    e.preventDefault();
    var elems  = $('.wrapper .settings'),
        cloned = elems.clone();

    cloned.find('input[type="text"]').on('keyup', function() {
        elems.find('[name="'+this.name+'"]').val( this.value );
    });

    $('.popup').append(cloned.show());
});

小提琴

于 2013-05-15T23:00:06.207 回答