Event handling in jqxgrid of JQWidgets

Question

i am using jqxGrid in my widget , there is a dropdown by which JqxGrid is loaded again and again, I have attached cell click event to grid , the issue is every time grid gets loaded , cell click event is called that many times . for example initially on, load cell click will be called once , but if it grid is again loaded from dropdown , cell click is called twice , again then its called thrice ..

I have attached the sample fiddle , everytime I click on cell click button , grid click events gets added up . I am printing the test message in console.

 $('#jqxgrid').on('cellclick', function (event) {});

Please see fiddle here FIDDLE SAMPLE

Thanks

Answer 1

In your code, you are recreating the grid every time you load the data. You should only be creating it once, and when you load the data, just update source.data and then call updatebounddata on the grid. Since you're recreating the grid every time and then creating the event handler, the handlers are just piling up.

See: http://jsfiddle.net/HB3Cb/96/

I moved the creation of the source, dataAdapter, and grid into an init function, and exposed the init and updateData handler:

return {
    init: init,
    updateData: updateData
}

If you check the console, you'll see that the handler only fires once per click no matter how many times you reload the data.