如果克隆的对象发生更改，则重新克隆对象

Question

我正在开发一个定价应用程序，它有很多工作要做，页面的不同部分是从不同的脚本模板加载的，即主干加载到 PHP 模板中。

我有一个侧边栏，可以动态更新用户的总余额。在移动设备上，侧边栏隐藏在下拉菜单中。长话短说，我已将该 html“价格”值克隆到页面上的另一个位置，并需要在原始（隐藏）值更新时对其进行更新。我已经克隆了这样的值：

            $(window).bind("load", function() {
                $('#quote_scrollbox .price').clone().insertAfter('.specifications-toggle img');
            });

并插入到正确的位置。但是，每当 .price 值更新时，我也需要在新位置更新它。这个值经常更新，因为这是一个定价应用程序，会随着每个用户输入而更新。有人可以帮我解决这个问题吗？

Answer 1

尝试利用input事件，.filter()匹配与当前元素值不同的元素，.val(function(index, val) {})将每个input元素设置为当前元素值

$(window).bind("load", function() {
  var input = $(".price");
  var clone = input.clone(true, true);
  clone.insertAfter("div");

  $(".price").on("input", function(e) {
    var elem = e.target;
    $(".price").filter(function(i, el) {
      return el.value !== elem.value
    }).val(function(i, val) {
      return elem.value
    });
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="price" />
<div></div>