Jquery Selectable - make all TD except the last one in each row unselectable

Question

I have managed to make the last TD in each row unselectable in JQuery Selectable plugin, by assigning a different class to the last TD than specified in the 'filter' option of selectable.

I have an image in the last TD on whose click I perform certain operation, although the TD does not get selected by the plugin, but it eats up the event half number of times, and Image click does not fire up. If I click that column 3 times, than it fires for only one time..its like random behavior.

Does anyone know how can I relay the event from Plugin to Img in case of last TD of row being clicked?

$("#Items").selectable({
            filter: 'td.ItemTd',
            selected: function () {
                var SelectedItem = $("#Items .ui-selected").parents('tr').first();
                SelectedItem.addClass('ui-selected');
            }
        });

I have explicitly set the class of the last TD of each row to other than 'ItemTd'.

Answer 1

Have you tried using jQuery's event.preventDefault() to suppress the click event on the last TD?

You can read more about it here

Answer 2

Have you tried adding the click event to the last td element and filtering down to the image from there?

$("#Items td.LastItemId").click(function(){
    $("img.imgClassName", this).click();
});