1

私はここに設定された例を持っています: http://jsfiddle.net/t7CKU/

これが私のjQueryです： 

var attr_index = 0;
$(document).on("propertychange keypress input paste", ".--variant-val-ul input:last", function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode != 9) {
        $(this).closest('ul').append('<li><i class="icon-li icon-level-up icon-rotate-90 text-light"></i><input type="text" name="options[' + attr_index + '][]" placeholder="Attribute Option"> <a class="grey-link no-underline --remove" title="Remove"><i class="icon-remove"></i></a></li>');
    }

});

これは関連する HTML です:

<ul class="icons-ul -li-margin-top-5 --variant-val-ul -v">
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" value="Small">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" value="Medium">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" value="Large">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" placeholder="Attribute Option">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
</ul>

フィドルでは、サイズの下の最後の入力に値がある場合にのみ、新しい入力が発生することに気付くでしょう。これは、最後のすべての入力に対して発生するはずです<ul>

この HTML は jQuery を介して動的に生成される場合があり、それが完了すると、この関数は適切に機能します。HTML がページと共にロードされている場合にのみ機能しません。

4

1 に答える 1