Question

I have a div in which i dynamically add different tables.

I need to maintain a column that was sorted out.

I am using Global Variables for storing the column names.

Since the table gets changed (a different structured table can be added dynamically too)

I register a TH (table head click event). In which i need to pass the JSON url.

I use LIVE event since the table is appended later on.

I want to get deregister all the TH click events when a new table is added.

I use UNBIND but it does not work. My click event fire twice with different params.

Code:

            $("#" + control.attr("id") + " tr th").unbind("click");

            $("#" + control.attr("id") + " tr th").live(
            "click" , function()
            {

              var table_head = $(this);

              var  new_sort_column = (table_head.text());

              opts.columnName = new_sort_column;

              ColumnName = new_sort_column;

              opts.IsAscending = GlobalIsAscending ;

              GlobalIsAscending = !GlobalIsAscending ;

              getPageSet(control, opts, 0);

            }
            );

// Might be required
(This code is a part of my jquery plugin where Opts is jquery options)

Any help is appreciated.

Answer 1

.live() would accept .die() to unbind the event from the select. api.jquery.com/die

btw u dont need to repeat the $(‘selector here’) part just use it as the following $(‘blabla’).die(‘click’).live();

so your code should be

$("#" + control.attr("id") + " tr th").die('click').live("click" , function(){
    var table_head = $(this);
    var  new_sort_column = (table_head.text());
    opts.columnName = new_sort_column;
    ColumnName = new_sort_column;
    opts.IsAscending = GlobalIsAscending ;
    GlobalIsAscending = !GlobalIsAscending ;
    getPageSet(control, opts, 0);
});