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:

$('#list-ui-table\\['+unique+'\\]').replaceWith(response.result.list_ui_output);

Here comes the problem. If I use:

$("[id^='list-ui-header-cell\\[']").click(sortTable);
$("input[name^='list-ui-filter']").keypress(applyFilters);

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">

On the new tab I include the javascript file which implements the key bindings again. It seems as if the new tab has inherited the click and keypress eventhandlers from the parent and they are being bind again, because If I try to sort or filter the table I see two ajax requests and responses, and the applyFilters and sortTable functions are called twice. This is very undesired of course. I tried to unbind the event handlers first, but it didn't work. Any Ideas?

Answers


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 !


Need Your Help

PHP image resize getting name and path

php image uploadify

I am trying to figure out where its putting the new resized image here.

eclipse says it's using JRE 1.7 even though it's using 1.6

java sql eclipse jdbc

I'm trying to build a simple jdbc sql example. it's 1 class. I have both jdbc driver jars referenced it's runtime is JavaSE-1.6. It connects to a database I already have setup using this code...