Dblclick and Click event handlers not invoked - used jQuery

Hello,
I have implemented an UI based on jQuery event handlers that moves the OPTIONs between two HTML SELECT boxes.

It works great and fine but there is an issue that I have observed.

When the page comes up the double clicking on OPTION does not move the item to another HTML select. After that second double click onwards it starts responding and moving the OPTION items between the two lists.
I have written a JS function to move the items between two list and binding it to the double click event in document.ready() event.

Here is the JS Function that I have implemented. Trying to comment appropriately.

$(document).ready(function(){

/* 
		 *	1. "sourceitemlist" and "selecteditemlist" are names of the HTML
			SELECT boxes.
		 *	
		 */

// The HTML Strings are given as example. They are created using JSON object in actual program.
                 sourceitemshtml = "<select id="sourceitemlist" name="sourceitemlist"><option value="item1" origtext="item1">item 1</option><option value="item2" origtext="item2">item 2</option></select>";
                 selecteditemshtml =  "<select id="selecteditemlist" name="sourceitemlist"><option value="item3" origtext="item3">item 3</option><option value="item4" origtext="item4">item 4</option></select>";

$("#sourceitemlist").html(sourceitemshtml);
		$("#selecteditemlist").html(selecteditemshtml);

// Binding double click to source SELECT box
		$("#sourceitemlist").bind("dblclick",function(e){
			var source = e.target.id;
			var destination = "selecteditemlist";			
			moveItems(source,destination);
		});

// Binding double click to destination SELECT box
		$("#selecteditemlist").bind("dblclick",function(e){
			//The alert below does not show up when 
			// page is loaded and OPTION is clicked.
			alert("in double click" + e.target.id);
			var source = e.target.id;
			var destination = "sourceitemlist";			
			moveItems(source,destination);
		});

});

/*
 * This function is useful in moving the option from Source list to Destination.
 */
function moveItems(source,destination){
	//alert("source ->" + source + " and destination -> " + destination);		
	var srcObj = $("#"+source);	
	var destObj = 	$("#"+destination);				
	var modifiedobjects = $("option:selected",srcObj).appendTo(destObj);
	
	modifiedobjects.each(function(index){
		if(destination == "selecteditemlist") {
			//Set custom properties which are used
			this.orderby = "ASC";
			this.text = this.origtext + " - " +  this.orderby;
		} else {								
			this.text = this.origtext;
			this.orderby = "";
		}
		this.selected = false;					
	});		
}

Thanks once again,
Amit

option elements do not support click events in all browsers.

Eric

Hello,
Thanks for your reply.
I am attaching the click and double click events to the HTML Select boxes.
The code posted wrongly shows OPTION elements alone. It has SELECT as well surrounding it.
I will update the code posted accordingly.
It does not work for the first time when HTML is loaded and thereafter it works fine.
Regards,
Amit

You'll need to post the relevant HTML fragments.

Hi Bear,
Thanks for your reply.
I am attaching a zip file (demo.zip) that has the cut-down version of what I am doing.
It took me a while to remove other things from the HTML so bit late in posting relevant HTML code.

I have one observation here though,
1) The same code works fine i.e. right from the first double click on SELECT box in FF 3.X
2) In IE 7 , browser asks us to allow the blocked content (which is related to restriction on Webpage from running Scripts/Active X controls etc etc.). After I do "Allow Blocked Content" , page loads and then does not respond to the first double click event. It happens with the buttons as well (These buttons are not part of the demo.html).

Below is the code for the demo.html ( I could not attach the file to this message).It depends on "jquery-1.3.2.min.js".

<HTML>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div.enclose-items {height:200px;width:150px;/*padding: 0.5em;*/float: left;margin: 0 10px 0 10px;border-style: solid;border-color: black;border-width: 2px;}
div.list-title {width:150px;border-style: double;border-color: black;border-width: 1px;font-family:Aerial;font-size: 14px;font-weight:bold;text-align:center;background-color:#F7F3D6;}
div.toggle-buttons {padding: 0.5em;float: left; width:25px;margin: 70px 10px 0 10px;border-style: solid;border-color: blue;border-width: 1px;}
select.select-class {height:200px;width:150px;	/*border-style:inherit;border-color:red;border-width:1px;*/}
</style>

$(document).ready(function(){
		/* Append the option items to the SELECT lists.*/
		var input = '{"columns":[{"name":"Item 1","target":"source"},{"name":"Item 2","target":"source"},' +
		'{"name":"Item 3","target":"destination"},{"name":"Item 4","target":"destination"}]}';

var data  = eval('(' + input + ')');
		//alert("data.columns" + data.columns);
		populateSelectBoxes(data.columns);

$("#sourceitemlist").bind("dblclick",function(e){
			//var source = e.target.id;
			var source="sourceitemlist";
			var destination = "selecteditemlist";
			moveItems(source,destination);
		});

$("#selecteditemlist").bind("dblclick",function(e){
			//var source = e.target.id;
			var source = "selecteditemlist";
			var destination = "sourceitemlist";
			moveItems(source,destination);
		});

$("#movetodest,#movetosrc").bind("click",function(e){
			//alert("handling click for ->"+e.target.id);
			var target = e.target.id;
			var source = (target == "movetodest")? "sourceitemlist":"selecteditemlist";
			var destination = (target == "movetodest")? "selecteditemlist":"sourceitemlist";
			moveItems(source,destination);
		});

});

/*
	 * This function helps creating the SELECT elements
	 * using the JSON Array passed to the function.
	 * format of the JSON Object is
	 * {name:column_name,default:true|false,sort:ASC|DESC}
	 */
	function populateSelectBoxes(arr) {
		var selecteditemshtml = "";
		var sourceitemshtml = "";
		var temp = "";
		jQuery.each(arr,function(index,obj){
			temp = '<option value="' + obj.name + '"> @replace@  </option>';
			if(obj.target == "destination") { //Put this in SELECTED ITEMS.
				temp = temp.replace("@replace@",(obj.name));
				selecteditemshtml = selecteditemshtml + temp;
			} else { // Put this in Source item list
				temp = temp.replace("@replace@",(obj.name));
				sourceitemshtml = sourceitemshtml + temp;
			}
		});
		$("#sourceitemlist").html(sourceitemshtml);
		$("#selecteditemlist").html(selecteditemshtml);
	}

/*
	 * This function is useful in moving the option from Source list to Destination.
	 */
	function moveItems(source,destination){
		//alert("source ->" + source + " and destination -> " + destination);
		var srcObj = $("#"+source);
		var destObj = 	$("#"+destination);
		//$("option:selected",srcObj).appendTo(destObj).attr("selected",false);
		var modifiedobjects = $("option:selected",srcObj).appendTo(destObj);

modifiedobjects.each(function(index){
			this.selected = false;
		});
	}
</script>

</head>

<body>
<form>
<div>
			<div id="sourceitems" class="enclose-items">
				<div id="source" class="list-title">Source</div>
				<select size="6" id="sourceitemlist" class="select-class" multiple>
				</select>
			</div>
			<div id="togglebuttons" class="toggle-buttons">
				<input type="button" id="movetodest" value=">>"/>
				<input type="button" id="movetosrc" value="<<"></input>
			</div>
			<div id="selecteditems" class="enclose-items">
				<div class="list-title">Destination</div>
				<select size="6" id="selecteditemlist" name="selecteditemlist" class="select-class" multiple>
				</select>
			</div>
</div>
</form>
</body>
</HTML>

Thanks in advance,
Amit

Sorry, but if this is an IE-only problem, I don't have a Windows installation currently that I can test upon.

Hi Bear,
Thanks anyways. Never mind. I will certainly post if I can overcome this issue.

Regards,
Amit