私はここに設定された例を持っています: 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 がページと共にロードされている場合にのみ機能しません。