JQuery click event fires multiple times
I'm developing a dynamic list or table tool. The table itself is created by PHP from data stored in database. If the user clicks on a column header it sorts the table (or changes the sort order), and every column has a filter input field. If the user presses 'enter' key while a filter has focus or clicks on a column header, the whole table updates via ajax. When I get the new content back, I replace the entire old table with the new:
Here comes the problem. If I use:
It works properly for the first time, because when I use replaceWith, the controllers of the new table will have no 'click' and 'keypress' events bind. I figured out to bind the event handlers globally to every presend and future controllers, I have to use the .on method:
// ASSIGN ENTER KEYPRESS ON FILTER INPUTS // .on makes sure that the handler will be applied for every present and future filter inputs. $(document).on('keypress', "input[name^='list-ui-filter']", applyFilters); // ASSIGN SORTING FUNCTION TO HEADER CELLS $(document).on('click', "[id^='list-ui-header-cell\\[']", sortTable);
This works nice, but I have a functionality that opens the table in a new browser tab, where it can take the whole browser window on full screen. All the data required to reproduce the table are encoded and passed in the URL. eg.:
<a href="http://localhost/lmvc_trunk/pages/listUIFullscreen/vVNNSwMxEP0rknNhtwiV7k0EQVCESk-uLDGZauxssmYmVi397062W62epKC3l_l472UyWSvrqEP9BrYxAVPrSVW3qtMP0LBjBDXaHiIs0Pnl7pgi7iCx5kTqbqQ0Ok0gBOt9gkqd1akswbY_uSp1BT7nFqYLno96DNOXfZFKzWeXP6QqdY1W49EN9w1jib2rzUgtHDLEfAExw_oes5e-UwjQtY6ztQGMy5ESviiwlF4KkZsQLcRc04Pm_m1oH65rXQTDLngJazJZMpHUfdM1cpMYECUuA-2HAXarLGoPIEg9MndVXdQFBqPxMRALbF8IZGYx-WVdZFWqi9xZF5Wz_QSibnu-fB6MCdqIDQsIDIdpbHt_o7Ib_1omDfiZHcK5wgBik9_2awkyy2G2WDuk3_jaX7b_kPrc3z8VywtNzfA9h4y0oSOeX5wnRDIRwAtH8u455Y82nkzLycnxVGIr521YgVAuNBLI53zSr00XgwGSXf_iG0KXPe2pFM1AyIjV5gM." target="_blank">
Instead of using the document , you can surround your input with a <div> and give the div id as follows :
$("#divID").on('keypress', "input[name^='list-ui-filter']", applyFilters);
Similarly with the other one too.
I had the same problem and It worked for me , Hope this works for you too !