Question

I have jQuery on() applied to each table row. After user clicks to any row another page starts loading:

table_tag.on("click", "tbody tr", function(event) {                
    var search_id = datatable.fnGetData(this)[0];                                
    if(event.ctrlKey) {                                                                                        
        window.open("/search/"+search_id+"/");
    } else {
        window.location.assign("/search/"+search_id+"/");
    }
});

I added to a table a new column. Each cell of it has only one checkbox:

<td><input type="checkbox" /></td>

I need to prevent loading another page after user clicking to this checkbox.
I tried this:

table_tag.off("click", "tbody tr td input:parent")

But it is not working. How can I do that?

Answer 1

You don’t have a handler on "tbody tr td input:parent". You have just one handler, on "tbody tr".

Instead, be more careful what you bind to: "tbody tr :not(input:checkbox)" should be better.

EDIT: As popnoodles says, the question is not clear. The above is to prevent loading a new page when a user clicks the checkbox (otherwise I imagine the checkbox to be somewhat useless). If your purpose is to disallow opening the new page if you click on rows that have the checkbox set, which is another interpretation of the question I can see, then apply the above patch to your selector, and in addition check the checkbox state from within the handler.

EDIT2: There was an error with a colon being missing; not(...) is incorrect, should be :not(...).

EDIT-too-much: Fiddle, with tbody tr td:not(:has(input:checkbox)).