Double click event on option of listbox not firing in IE

Question

I want to attach an event to the option tags in a list box so that when I click one of them, it moves to another list box.

I have this code:

$('#' + opts.leftListId + ' > option').live('dblclick', function () {
     // Move the object
});

Works fine in Firefox, but in IE the event is not fired at all. I can't use double click on the select node, because I need to move only the one that was clicked on. Any ideas?

Answer 1

Try this instead:

$('#' + opts.leftListId).find('option').each(function(){
  $(this).live('dblclick', function () {
     // Move the object
  });
});

Update (10:21 GMT)

Try taking out the live:

$('#' + opts.leftListId).find('option').each(function(){
  $(this).dblclick( function () {
     // Move the object
  });
});

See this example - http://jsfiddle.net/hr7Gd/

Update (10:45 GMT)

Your other option is to run the dblclick() on the select (which works!) and the get the vale of wich option has been selected and work with that:

$("select").dblclick(function () {
  var str = "";
  $("select option:selected").each(function () {
    str += $(this).text() + " ";
  });
  $("span").text(str);
})
.trigger('change');

See this example working here - http://jsfiddle.net/hr7Gd/1/

Answer 2

Doubleclick won't fire on ie if you try to add them to option elements, no matter how you add it. The only thing that I've got working in IE is to add the event watch to the select itself and then to look at selected elements:

$("select").dblclick(function () {
  $("select option:selected").each(function () {
    alert(this);
  });
});    

Answer 3

Got it - I was wrong thinking that I couldn't use the select's double click event.

This is the working code:

$('#' + opts.leftListId).dblclick(function () {
      // Move selected options: $('#' + opts.leftListId + ' :selected')
});

The reason I didnt think that this would work is that I thought it would move over all selected elements rather than just the one clicked on. However, it appears that the first click of a double-click selects only the one element, before this event fires on double click and moves it across.