Can't bind events to a table row after it has been made selectable

[jeffreybolle]

I noticed that if I make a table row selectable I can't bind a click or double click event (maybe others) to them. The event I try to bind simply won't fire.

This bug occurs in Firefox 3.0.6 running under Windows Vista SP1. This bug doesn't occur in Internet Explorer 7 running under the same system.

$('tbody').selectable({filter:'tr'});
$('tbody tr').click(function(){alert("click event");});

This is my first bug report, let me know if I've done anything wrong.

Jeff

[ajacksified]

I'm also experiencing the same thing with doubleclick in Firefox 3.0.7 on Windows XP SP3.

[epascarello]

Added debugging statements to figure out where the click was being blocked and found the problem to be with the helper lasso

[ui.selectable.js - line2 80+?]

//return  //Click event works
		this.helper.css({
			"z-index": 100,
			"position": "absolute",
			"left": event.clientX,
			"top": event.clientY,
			"width": 0,
			"height": 0
		});
return  //Click event fails

If I were to change the z-Index of the helper to -100, code works fine. So the issue seems to be the browser is firing the click event on the layer we created and not the actual click location.

[epascarello]

Seems like if I adjust the lasso to be offset by 2 pixels, the onclick for the row fires.

			"left": event.clientX-2,
			"top": event.clientY-2,

Looks a little ugly, but works.

[Ludovic]

I've got the same problem on Firefox 3.5, Firefox 3.0.13 and it is quite blocking.

Is it linked with _mouseInit which binds mouse click and call a stopImmediatePropagation() ?

[Scott González]

Also see #4067.

[benjamin.neau]

This issue also happens on IE 8, FF 3.6.3, Chrome 5.0.375.70. (Windows XP SP3)

Using

		this.helper.css({
			"z-index": self.element.zIndex() - 1,
			"position": "absolute",
			"left": event.clientX,
			"top": event.clientY,
			"width": 0,
			"height": 0
		});

and

		this.helper.css({ zIndex: 100, left: x1, top: y1, width: x2-x1, height: y2-y1});

instead of

		this.helper.css({
			"z-index": 100,
			"position": "absolute",
			"left": event.clientX,
			"top": event.clientY,
			"width": 0,
			"height": 0
		});

and

		this.helper.css({ zIndex: 100, left: x1, top: y1, width: x2-x1, height: y2-y1});

solves the issue on all 3 aforementionned browsers and does not seem to generate any other problem beside repeatidly setting the zIndex when the mouse is dragging (whereas once would be enough...).

[rdworth]

This is as designed. The default value for the distance option is 0 which shouldn't allow any click to occur after a mousedown as the mousedown captures and starts the selection right away. See ​http://jsbin.com/idixi6

If you set the distance option to a value greater than 0 then the click works and the selection doesn't start until at least a 1px (or {{distance}}px) mousemove follows the mousedown. See ​http://jsbin.com/idixi6/3

[rdworth]

See related discussion ​http://forum.jquery.com/topic/selectable-dosn-t-fire-click-event