Question

I’m using jQuery 1.8.0 to bind an onchange event to an <input type="file"> element. In my page I have a clear button to clear the input.

<div id="wrapper">
    <input id="upload" type="file">
</div>
<button id="button">clear</button>

<script type="text/javascript">
    $("[id='upload']").on("change",
        function()
        {
            alert('changed');
        });
    $("[id='button']").click(
        function()
        {
            $("[id='wrapper']").html($("[id='wrapper']").html());
        });
</script>

When I select a file for the first time the alert shows. However when I clear the input using the button the alert doesn’t work anymore.

To demonstrate the problem I’ve created a JS Bin.

When using the .live binding instead of the .on binding it works flawlessly, but I noticed that the .live method is deprecated. So what to use instead?

Answer 1

live delegates the event from document object, but on doesn’t, using on you should delegate the event from one of static parents of the element or document object.

live method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page.

$('#wrapper').on("change", "#upload", function() {
     alert('changed');
});