The JS file doesn't work in partial view after it refreshed

Question

This is branch question of \"Js file not loaded after partial view is refreshed\". The broblem is that if I put my script in to the main view it doesn\'t work in partial. My

Answer 1

This happens as you have removed the DOM elements that jQuery attached its events to. jQuery doesn't keep track of the page and add new events when you add new elements, its a one time deal. You can get around this by placing the event on a parent that always exists on the page and then use a selector to get at the elements you want. The jQuery documentation for the .on() method tells you more.

I need to modify code as follows:(working well if partial view refreshed)

var item_to_delete;
    $("#serviceCharge").on('click','.deleteItem' ,function (e) {
        item_to_delete = $(this).data('id');
        alert(item_to_delete);
    });

My Previous code was: (working till partial view not refresh)

var item_to_delete;
        $(".deleteItem").click(function (e) {
            item_to_delete = $(this).data('id');
        });