Databases
StackOverflow2013
Postsdbo
POJQuery click event fires multiple times
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery click event fires multiple times
    primarykey
    data
    text
    <p>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:</p> <pre><code>$('#list-ui-table\\['+unique+'\\]').replaceWith(response.result.list_ui_output); </code></pre> <p>Here comes the problem. If I use:</p> <pre><code>$("[id^='list-ui-header-cell\\[']").click(sortTable); $("input[name^='list-ui-filter']").keypress(applyFilters); </code></pre> <p>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: </p> <pre><code> // 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); </code></pre> <p>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.:</p> <pre><code>&lt;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"&gt; </code></pre> <p> </p> <p>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?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USACs
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POJQuery click event fires multiple times
      1. This table or related slice is empty.
      1. VTUpMod
    1. COjust to let you know, that those selectors are the slowest kind of them all
      singulars
      1. POJQuery click event fires multiple times
      1. USfmsf
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload