Question

我有以下jQuery代码：

$("#file-upload").change(function () {
    if (this.files && this.files[0]) {
        $('#cancel-image-upload').html('<button type="button" class="btn btn-warning" id="cancel-upload-button" style="margin-right:15px;">cancel</button>');
    }
    else
        $("#image-preview").attr("src", "http://placehold.it/200x150");
});


$('#cancel-upload-button').click(function () {
        $("#file-upload").replaceWith('<input type="file" id="file-upload" name="file" accept="image/*">');
    });

此代码的作用是在选择文件后显示取消按钮，按钮应该能够在单击时删除它。我尝试了上面的代码，但由于某种原因它没有用。为什么以及如何解决它？谢谢！

Answer 1

尝试

$(document.body).on('click', '#cancel-upload-button', function () {
    $("#file-upload").replaceWith('<input type="file" id="file-upload" name="file" accept="image/*">');
});

您需要一个实时绑定才能将事件保留在取消按钮上，因为您要在#file-upload change（）回调中将其从DOM中删除。

Answer 2

在添加控件后，即在if循环内添加＃cancelup-upload-button的点击处理程序。

ReplaceWith jQuery不起作用

2 个答案: