Question

我有这些输入字段，当我点击“EDIT”按钮时我正在使用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克隆函数是否可以执行引用类型复制的原因。

或者有更好的方法吗？

Answer 1

$('.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());
});

FIDDLE

如何克隆输入字段对象并在jQuery中引用原始字段和克隆字段？

1 个答案: