Click in a row event

[diclonius]

Hi, again me: D
I have the following case and I hope you can help me.

I am adding the following code by jquery:

$('.datagird tr').click(function(){
	var code = "";

	code = $(this).find("td").eq(0).find("input").val();
	$("hdfCode").val(code);

	$(".selectRow").toggleClass('selectRow');
	$(this).find("td").toggleClass('selectRow');
});

Everything works fine, the problem occurs when I make a filter or change of page, then the click event of the row stops working, I imagine it is due to the restructuring of the table.

Any idea to keep the click event in the row working, even after making a filter or changing the page.

[Holt59]

The <tr> are destroyed each time an operation is performed, but there are ways to make the event working. You can use any of the following ways (not tested):

• Use event-delegation on an enclosing DOM element: https://learn.jquery.com/events/event-delegation/. You simply need to replace $('.datagird tr').click(function() { }); by:

$(".datagird").on("click", "tr", function() { });

• Put your code in the afterRefresh callback of the datatable.
• Use a custom lineFormat option when constructing the datatable and apply the .click within the function.

I cannot write actual code to show you how to use these right now but if you have issue with the above directions, feel free to ask for clarification.

[diclonius]

Hello, the first option was great, but the question remains. How can I use the "afterRefresh" and place a code that I need.

[Holt59]

Hello, the first option was great, but the question remains.

So the first option did not solve your issue?

How can I use the "afterRefresh" and place a code that I need.

This should work (when constructing the datatable:

$(".datagird").datatable({
    /* Your other options... */
    afterRefresh: function() {
         // Or $(this).find("tr").click 
        $('.datagird tr').click(function(){
            var code = "";

            code = $(this).find("td").eq(0).find("input").val();
            $("hdfCode").val(code);

            $(".selectRow").toggleClass('selectRow');
            $(this).find("td").toggleClass('selectRow');
        });
    }
});