ReplaceWith jQuery doesn't work

Question

I have the following jQuery code:

$("#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/*">');
    });

What this code does is to display cancel button after file has been chosen, and the button should be able to delete it when clicked. I tried the code above but it didn't work for some reason. Why and how can I fix it? thanks!

Like you have used before, did you try directly using `.html` than `replaceWith`. — j809, Jul 10 '14 at 11:57

score 2 · Accepted Answer · answered Jul 10 '14 at 11:59

2

Try

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

You need a live binding in order to keep the event on the cancel button, since you're removing it from the DOM in the #file-upload change() callback.

answered Jul 10 '14 at 11:59

wiesion

2,349
12
21

The same goes of course for the bindings of #file-upload, since it gets replaced dynamically. – wiesion Jul 10 '14 at 12:02

score 0 · Answer 2 · answered Jul 10 '14 at 12:01

0

Add #cancel-upload-button's click handler just after adding the control ie inside the if loop.

answered Jul 10 '14 at 12:01

Abe

31
4

ReplaceWith jQuery doesn't work

2 Answers2