将jQuery插件附加到动态生成的元素

时间:2013-08-27 23:06:30

标签: jquery jquery-plugins append

我正在使用插件来管理我的上传者。但问题是,每次按下按钮时我都会添加新的文件上传器,因此插件只会加载在页面加载时已经创建的元素。这是我的一个例子:

<div id="uploaders">
    <div class="container">
        <div class="file-uploader">
            <input type="files" name="files[]">
        </div>
    </div>
    <button>Add new uploader</button>
</div>
<script src="js/file-uploader.min.js"></script>
<script>
$(function() {
    $uploaders = $('#uploaders');
    $uploaders.find('.file-uploader input').myPlugin({ options }).on('uploadfinished', function(){ console.log('File uploaded!'); });
    $uploaders.find('button').on('click', function(){
        $(this).closest('.container').append('<div class="file-uploader"><input type="files" name="files[]"></div>'); //This uploader won't load myPlugin
    });
});
</script>

我有没有办法将该插件附加到所有生成的文件上传器?我知道我可以在添加HTML之前做到这一点,但这是一个问题,因为我必须再次定义所有配置和事件......

1 个答案:

答案 0 :(得分:0)

使用jQuery .on()方法并使用此处描述的“委托事件”方法:http://api.jquery.com/on/