Datatables Row Grouping Stop Expanding When Input Clicked

Question

Using datatables and row grouping I am trying to get the rows to not expand when a input is clicked.. but only expand when the tr is clicked. .stopPropagation() isn't working.

I am using .live() because the table is dynamically created by ajax.

$("#example input[type='text']").live('click',function(event){
    event.stopPropagation();
    return false;
});

Here's a jsfiddle: http://jsfiddle.net/JWvZt/

Answer 1

While troubleshooting, it took me a while to find that you had your click event bound twice in your jsfiddle (at the beginning and at the end of the javascript frame). After removing the first one and defining the 2nd as:

$("#example td").on('click','input[type="text"]', function(event){
    event.stopPropagation();
    return false;
});

the code works as desired. Note: I'm using .on() because .live() is deprecated. In order to refresh the event bindings, when you dynamically create your rows you will have to call the above code fragment in the AJAX success handler (or .done() method).

Here's a link to jsfiddle