Question

有一个脚本。它将来自selects的文本添加到Special Price块的标签中。在number的输入处，添加了新的相似块。必须添加与上一个块完全相同的块。但是未添加标签<span>（numb，curr）中的文本。我了解这个脚本只能解析原始的HTML标记吗？

https://playcode.io/301889?tabs=console&script.js&output

代码：

(function() {
  $(document).ready(function() {
    $('.field.inline.specially > span.curr').text(
      $('#id_lot_currency > option:selected').eq(0).text()
    );
    $('.field.inline.specially > span.numb').text(
      $('#id_lot_type > option:selected').eq(0).text()
    );
    $(document).on('change','#id_lot_currency',function () {
      $('.field.inline.specially span').eq(3).text($('option:selected',this).text())
    })
    $(document).on('change','#id_lot_type',function () {
      $('.field.inline.specially span').eq(1).text($('option:selected',this).text())
    });
  })
  var copy = document.querySelector('.field.inline.specially').cloneNode(true);
  document.querySelector('html').addEventListener('input', function(e) {
    if (e.target.classList.contains('event') && e.target.tagName == 'INPUT') {
      var error = 0;
      for (var evt of document.querySelectorAll('.field.inline.specially input.event')) {
        evt.value = evt.value.replace(/[^\d]/, '');
        if (!evt.value || +evt.value < 1) error++;
      }
      if (!error) {
        var last = document.querySelectorAll('.field.inline.specially');
        last[last.length - 1].insertAdjacentHTML('afterEnd', copy.outerHTML);
      }
    }
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field inline" id="lot_minimum">
  <label for="id_lot_minimum" class="subhead">Lot minimum:</label>
  <input type="number" name="lot_minimum" required id="id_lot_minimum" />
  <select name="lot_type" style="width: 100px" class="select2" id="id_lot_type">
    <option value="1">kg</option>
    <option value="2">foot</option>
  </select>
</div>
<div class="field inline" id='lot'>
  <label for="id_lot_cost" class="subhead">Cost:</label>
  <input type="number" name="lot_cost" step="0.01" required id="id_lot_cost" />
  <select name="lot_currency" style="width: 100px" class="select2" id="id_lot_currency">
    <option value="1">usd</option>
    <option value="3">blg</option>
    <option value="2">uah</option>
  </select>
</div>

<div class="field inline specially">
  <label for="specially" class="subhead">Special price</label>
  <span class="id_specially_price"><input type="text" name="adittional_specially_price" style="width: 165px" class="event" id="" /></span>
  <span class='numb'></span>
  <span class="id_specially_number"><input type="text" name="adittional_specially_number" style="width: 100px" class="event" id="" /></span>
  <span class='curr'></span>
</div>

Answer 1

使用$('#item').on('change',function)代替$(document).on('change','#item',function)，它将在注入HTML的情况下起作用。

Answer 2

(function() {
  $(document).ready(function() {
    $('.field.inline.specially > span.curr').text(
      $('#id_lot_currency > option:selected').eq(0).text()
    );
    $('.field.inline.specially > span.numb').text(
      $('#id_lot_type > option:selected').eq(0).text()
    );
    $(document).on('change','#id_lot_currency',function () {
      $('.field.inline.specially span.curr').text($('option:selected',this).text())
    })
    $(document).on('change','#id_lot_type',function () {
      $('.field.inline.specially span.numb').text($('option:selected',this).text())
    });
  })

  document.querySelector('html').addEventListener('input', function(e) {
    var copy = document.querySelector('.field.inline.specially').cloneNode(true);
    if (e.target.classList.contains('event') && e.target.tagName == 'INPUT') {
      var error = 0;
      for (var evt of document.querySelectorAll('.field.inline.specially input.event')) {
        evt.value = evt.value.replace(/[^\d]/, '');
        if (!evt.value || +evt.value < 1) error++;
      }
      if (!error) {
        var last = document.querySelectorAll('.field.inline.specially');
        last[last.length - 1].insertAdjacentHTML('afterEnd', copy.outerHTML);
      }
    }
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field inline" id="lot_minimum">
  <label for="id_lot_minimum" class="subhead">Lot minimum:</label>
  <input type="number" name="lot_minimum" required id="id_lot_minimum" />
  <select name="lot_type" style="width: 100px" class="select2" id="id_lot_type">
    <option value="1">kg</option>
    <option value="2">foot</option>
  </select>
</div>
<div class="field inline" id='lot'>
  <label for="id_lot_cost" class="subhead">Cost:</label>
  <input type="number" name="lot_cost" step="0.01" required id="id_lot_cost" />
  <select name="lot_currency" style="width: 100px" class="select2" id="id_lot_currency">
    <option value="1">usd</option>
    <option value="3">blg</option>
    <option value="2">uah</option>
  </select>
</div>

<div class="field inline specially">
  <label for="specially" class="subhead">Special price</label>
  <span class="id_specially_price"><input type="text" name="adittional_specially_price" style="width: 165px" class="event" id="" /></span>
  <span class='numb'></span>
  <span class="id_specially_number"><input type="text" name="adittional_specially_number" style="width: 100px" class="event" id="" /></span>
  <span class='curr'></span>
</div>

jQuery看不到添加的文本

2 个答案: