Kendo upload - how to add a javascript event handler for file remove button click

Question

My kendo template is as follows:

<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
    <span class='k-progress'>
    </span>
    <strong class='k-upload-status'>
        <button type='button' class='btn-remove k-button k-button-bare k-upload-action'> 
            <span class='k-icon k-i-close k-delete' title='Remove'></span>
        </button>
    </strong>
</script>
<script>
    $("#files").kendoUpload({
        template: kendo.template($('#fileTemplate').html())
    });
</script>

I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.

$(".k-delete").click(function () {
    alert("Remove button clicked");
});

since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.

$("body").on("click", ".btn-remove", function () {
    alert("dynamic control event handler");
});

Any help is appreciated!

Answer 1

According to Kendo Upload API documentation, you can bind a function to the remove event. So this is where you could hide your file-err-msg div :

$("#files").kendoUpload({
    template: kendo.template($('#fileTemplate').html()),
    remove: function(e) {
        $('#file-err-msg').hide();
    }
});