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/