Question

我正在为alt货币创建一个页面，业主可以为各种产品设置价格。建议的汇率为10美元至1美元。我希望用户输入美元价格并使当前输入自动填充美元输入金额的1/10。

我有这个工作的第一组输入。但是，用户还可以通过单击按钮添加更多产品输入。我的keyup函数不适用于这些动态创建的输入。有什么想法吗？

HTML

<div id="product-div" class="small-12 medium-9 small-centered columns">
  <div class="currency-input input-middle small-3 columns">
    <span class="currency-placeholder">$</span>
    <input id="dollar-price-1" class="dollar-price" type="number" placeholder="10" />
  </div>

  <div class="currency-input input-right small-3 columns">
    <svg class="inline currency-placeholder" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="24px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"><g><text transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="Apple-Chancery" font-size="112.6105" fill="#888888">C</text><text transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="AvenirNext-MediumItalic" font-size="79.8022" fill="#888888">o</text></g></svg>
    <input id="current-price-1" class="current-price" type="number" placeholder="1" />
  </div>
</div>

<button id="add-product">Add product</button>

</button>

JS

var num = 1;

$('#add-product').click(function() {

  num++;

  $('#product-div').append('<div class="currency-input input-middle small-3 columns"><span class="currency-placeholder">$</span><input id="dollar-price-' + num + '" class="dollar-price" type="number" placeholder="10"/></div><div class="currency-input input-right small-3 columns"><svg class="inline currency-placeholder" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="24px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"><g><text transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="Apple-Chancery" font-size="112.6105" fill="#888888">C</text><text transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="AvenirNext-MediumItalic" font-size="79.8022" fill="#888888">o</text></g></svg><input id="current-price-' + num + '" class="current-price" type="number" placeholder="1"/></div>');
});

$('.dollar-price').keyup(function() {
  var num_id = $(this).attr('id').match(/\d+/);

  $("#current-price-" + num_id).val(this.value / 10);
  return false;
});

将输入值复制到另一个动态创建的输入

0 个答案: