jQuery issue with Primefaces

Question

I have a PrimeFaces based Webapp which consists of mulitple Tabs and each Tab contains a datatable. I am using jQuery to bind click handler to input fields having a certain class in a datatable component. Here is the jQuery code:

$(document).ready(function() {
  $('.ui-column-filter').bind('click' , function() {
   //Desired functionality comes here
   });

 };

Now, the issue I am facing is that this code works only the first time the webpage loads and only for the first tab. As soon as I click another tab, the code stops working, even for the first tab for which it was previously working. Each tab fetches its content via AJAX so my guess is that as soon as an AJAX request is made, the event handlers attached via $(document).ready do not function anymore. How can I solve this problem?

Answer 1

Solved the problem via this link JSF/PrimeFaces ajax updates breaks jQuery event listener function bindings as follows :

  $(document).on("click", ".ui-column-filter", function() {
  //The desired functionality
 });