1

I have a form on my page that submits the form via AJAX and then there is a script that processes some MySQL data and returns the data formatted as a <table> and displays it. I wanted to added sorting capabilities to this table, and found this simple but yet usefull plugin.

The issue is that it is not working for me. I tried adding the code in the .ready() portion of my JavaScript file, as well as outside of it. But there is still no effect. Is the onClick function is set when the page loads? and because the page is not refreshed when the table is shown - the onClick is not bound to it?

In that case, how can I bind jQuery to the returned table?

Community
  • 1
  • 1
Kalinka
  • 205
  • 1
  • 9

2 Answers2

4

It is recommended to use the .on() method of JQuery.

Something like: 

$('.selector_for_table').on('click', '.selector_of_header', function(e){ //logic })

Recommended reading: Jquery documentation .on()

dubes
  • 5,324
  • 3
  • 34
  • 47
  • 1
    the entire table does not exist until it is returned by the AJAX call. So I think that the binding of the `on` are not binding to the elements. How can I bind it after the AJAX returns the table? – Kalinka Nov 17 '14 at 14:53
  • 2
    You can bind it to the container that contains the header you want to click, so if your table is coming from the DB, I am guessing you would have some DIV in which it gets populated, so you can use the .selector_for_div_container' instead of '.selector_for_table'. – dubes Nov 17 '14 at 15:02
1

you can use live method instead of using bind it will bind dynamically if control is recreated.

$("#tableId").live('event','method');
yashpal
  • 326
  • 1
  • 3
  • 16