javascript - 動的アイテムのjquery "on"問題

Question

私はjqueryを持っています

$(document).ready(function(){

        $(".files").on('change', function() {
            $('.file_fiels').append('<li><input type="file" name="attachments[]" multiple="multiple" class="files" /></li>')
        }); 

    })

とHTML

<ul class="file_fiels">
<li><input type="file" name="attachments[]" multiple="multiple" class="files" /></li>
</ul>

つまり、誰かが項目を入力に追加すると、別の入力タイプが表示されるはずです。

最初の入力タイプで完全に機能しますが、最初の入力タイプでアイテムを追加したときに作成される入力では機能しません。

Answer 1

動的に追加された要素のイベントデリゲートで使用

$('.file_fiels').on('change', '.files', function() {
   $('.file_fiels').append('<li><input type="file" name="attachments[]" multiple="multiple" class="files" /></li>')
});

デリゲートイベントについてもっと読む

Answer 2

親要素は静的であるため、イベント委任<ul>を使用できます。

$(".file_fiels").on("change", ".files", function() {
    $(".file_fiels").append("<li> ... </li>");
});

Answer 3

私はいつも.live()ダイナミックなアイテムに使用してきました、それは私にとってほとんど完璧に機能しました。