#4219 closed bug (notabug)

Opened February 23, 2009 07:43PM UTC

Closed March 19, 2011 11:51PM UTC

Last modified March 21, 2011 02:30PM UTC

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

Reported by:	jeffreybolle	Owned by:
Priority:	major	Milestone:	1.9.0
Component:	ui.selectable	Version:	1.6rc6
Keywords:	selectable, events	Cc:
Blocked by:		Blocking:

Description

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

Attachments (0)

Change History (9)

Changed March 08, 2009 02:31PM UTC by rdworth comment:1

milestone:	1.7 → 1.8

Changed March 23, 2009 03:58PM UTC by ajacksified comment:2

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

Changed March 30, 2009 04:27AM UTC by epascarello comment:3

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.

Changed March 30, 2009 04:34AM UTC by epascarello comment:4

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.

Changed August 21, 2009 07:12AM UTC by Ludovic comment:5

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() ?

Changed February 19, 2010 03:28AM UTC by scottgonzalez comment:6

Also see #4067.

Changed June 13, 2010 02:01AM UTC by benjamin.neau comment:7

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...).

Changed March 19, 2011 11:51PM UTC by rdworth comment:8

resolution:	→ invalid
status:	new → closed

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

Search and Top Navigation