Doug Nicolas Doug Nicolas - 1 month ago 13
jQuery Question

Partial View MVC Jquery Not Working

I have a table. Which I am returning a list of rows, and in one of the rows I have a button. This button has a class called 'password'. I am attaching a click event to this class. Every time the user clicks this button I do an ajax call and fetch the password from the server and show it in the cell...

The problem is that whenever I return a partial view (virtual paging, returning more rows, or filtering records, or sorting), the click event no longer works.

Here is my javascript

$('.password').click(function () {
var self = $(this);
var accountID = $(this).attr('data-id');
var route = {
serverAction: 'GetDecryptedPassword',
args: {
ID: accountID
}
};

App.getJSON(self, route, function (sender, data) {
$("#" + accountID).html(data);
});

return false;
});


I'm guessing the handler is no longer attached once the elements are refreshed by the partial view. Does it need to be reattached?

Any help would be appreciated.

Answer

you need to delegate the event

$(staticContainer).on('click', '.password', function () {

Events are always attached to the elements that are on the page , when the script loads. So when you fetch the other rows using Ajax , those rows were still non-existent .

So the events were not bound for those elements. So if you delegate the events to the Static container , you are basically listening to the event on that Container and when the click event occurs the event will be bubbled to the parent and triggers the event.

Comments