jQuery动态事件绑定

jQuery动态事件绑定

html代码如下：

<div class="upload-container service-template">
    <p>模板导入</p>
    <div class="service-container border">
        <div class="item-container">
            <div class="upload-input-container">
                <form class="formFile">
                    <input class="file-input" type="file" name="file0">
                </form>
            </div>
            <div class="upload-button-container">
                <button class="upload">上传</button>
            </div>
            <div class="add-one-container">
                <button class="add-one">新增</button>
            </div>
        </div>
    </div>
</div>

动态生成DOM代码：

$('.add-one').click(function() {
    var len = $('.formFile').length;
    var item = '<div class="item-container upload-item"><div class="upload-input-container"><form class="formFile"><input class="file-input" type="file" name="file' + len + '"></form></div><div class="upload-button-container upload-button"><button class="upload">上传</button></div><div class="add-one-container add-button"><button class="remove-one">删除</button></div></div>';
    $('.service-container').append(item);
});

错误的绑定方法，以下两种方法都不能给动态DOM元素绑定事件：

$(".remove-one").click(function(event) {
    $(this).parent().parent().remove();
});

$(".remove-one").on('click', function(event) {
    $(this).parent().parent().remove();
});

正确的绑定方法：

$(document).on("click",".remove-one",function(){
    $(this).parent().parent().remove();
})