Deactivate click-Event for last column

Question

On my js I set a click-Event for each table-row. This works fine atm. I try to remove the click-Event just for the last column of this table, but it doesn't work.

Do you have an idea why? Is the selector right or do I have to select more than just the last-child of td?

function addRowHandlers() {
var table = document.getElementById("klauselliste");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler =
        function (row) {
            return function () {
                var cell = row.getElementsByTagName("td")[0];
                var name = cell.innerHTML;
                window.location.href = '/Klausel/Detail?Name=' + name.trim();
            };
        };

    currentRow.onclick = createClickHandler(currentRow);
}



// Code Snippet
addRowHandlers();
$("td:last-child").unbind("click");
// Code Snippet

Answer 1

I recreated your code as "pure jQuery". Less code, same effort. Note the :not(:last-child) , it will select all td of a row, execpt the last.

function addRowHandlers() {
    $("table#klauselliste tr td:not(:last-child)").click(function() {
        var name = $("td:eq(0)", $(this).parent()).html();
        window.location.href = '/Klausel/Detail?Name=' + name.trim();
    });
}

See here for an working example: https://jsfiddle.net/wuhtt7sc/1/

Answer 2

Try using .find() to locate the last element on your table.

$('#klauselliste tr').find('td:last').on('click', function (e) {
 e.preventDefault();
 e.stopPropagation();
});