有没有一种方法可以根据 jquery 中克隆元素的更改来更新 clone() 源？

Question

我有一个包含复选框输入的克隆元素。当取消选中克隆的元素时，我需要也取消选中源元素。在 jQuery 中有没有办法做到这一点？还是我以错误的方式解决这个问题（即使用 clone()）？我应该提到我的问题类似于此 SO question 除了我需要在克隆元素更改时更新原始元素，而不是简单地维护引用。

Answer 1

在克隆的元素上添加事件侦听器以在更改时更新原始元素。

像这样

var initial = $('some-element'),
    cloned = initial.clone();

cloned.on('change', function(){ 
    initial
        .prop('checked', this.checked)
        .trigger('change'); 
});

Answer 2

因为它是一个复选框并且您特别关注 checking/unchecking 框，您可以监听事件“change”，该事件将在每次框的 checked 状态时触发变化。

var copy = $('#my-element').clone();

copy.change(function(){
    $('#my-element').replaceWith(copy.clone());
});

Answer 3

$(document).ready(function () {
 var $source = $("#source input[type='checkbox']");
 var $target = $source.clone(true, true);
 $("#target").append($target);
  
  // set current source value ..
  $($source).prop("checked", $target.prop("checked"));
  // update source to target and vice-verse, on change ...
 $target.change((event) => {
  $($source).prop("checked", $(event.target).prop("checked"));
 });
 $source.change((event) => {
  $($target).prop("checked", $(event.target).prop("checked"));
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
  <span>source</span>
  <input type="checkbox"/>
</div>

<div id="target">
  <span>target</span>
</div>

有没有一种方法可以根据 jquery 中克隆元素的更改来更新 clone() 源？

Is there a way to update a clone() source based on change to the cloned element in jquery?

javascript

jquery

jquery-clone