CODEWITHSUNDEEP
jqueryinternet-explorereventslistboxdouble-click
Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

Double click event on option of listbox not firing in IE

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?

Upvotes: 7

Views: 15251

Answers (3)

Aspelund
Aspelund

Reputation: 426

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);
  });
});

Upvotes: 8

Alex
Alex

Reputation: 9041

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/

Upvotes: 7

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

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.

Upvotes: 3

Related Questions