2

I am using jQuery 1.7.1 on my site and using the .live() function for some events that need to be called on future-added elements. For some reason it is not working (No errors, no alerts, nothing is shown). I have read a little and some people say that it doesn't work, and others say that it works fine but I haven't seen any workarounds, fixes or anything that is even recent. It works fine in other browsers, just not in IE9 (and probably the other IE's).

Is there an alternative to .live in jQuery that I could use, a plugin or some workaround that will fix this?

My current code is as follows:

$('select[name="CourseLevelSelector"] option').live('dblclick', function () {
    //Do Stuff
});

-Jake

EDIT:

My aim all in all is that I have 2 multiple select boxes, one that has data in and another that is blank. When you doubleclick on an option in the select box with data in, it will duplicate itself into the empty select. And if you then doubleclick on an option that has been added, it will remove it completely. (This code is working, it's just the event handler that isn't)

HTML looks something along these lines:

<select name="CourseLevelSelector" multiple="multiple">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>
<select name="CourseLevelIDs" multiple="multiple">

</select>
animuson
  • 53,861
  • 28
  • 137
  • 147
JakeJ
  • 1,381
  • 3
  • 14
  • 34
  • 2
    `.live` is deprecated since 1.7. Have you tried the alternatives? (I guess not. Have a look at the documentation first then). – Felix Kling Apr 11 '12 at 16:27
  • take a look at [this post][1] looks like it may be the answer your looking for [1]: http://stackoverflow.com/questions/3840149/jquery-live-event-for-added-dom-elements – mcgrailm Apr 11 '12 at 16:32

3 Answers3

3

In IE, the option elements don't get click events, only the select elements. You will need to bind your events to the select object.

Try this test app in IE to see the issue: http://jsfiddle.net/jfriend00/JGrbh/

Per, your more request disclosure of what you're actually trying to do, you can fix it like this http://jsfiddle.net/jfriend00/Ry9Ns/ using the dynamic form of .on() instead of the deprecated .live().

$("#container").on('dblclick', 'select[name="CourseLevelSelector"]', function(e) {
    var ids = $('select[name="CourseLevelIDs"]');
    $(this).find(":selected").each(function() {
        // make sure selected item is not already in the other list
        if (!ids.find('[value="' + this.value + '"]').length) {
            $(this).clone().appendTo(ids);
        }
    });

})


$("#container").on('dblclick', 'select[name="CourseLevelIDs"]', function(e) {
    $(this).find(":selected").remove();
})​
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Just my luck... Would you happen to know of a workaround for this? – JakeJ Apr 11 '12 at 16:41
  • I don't know exactly what your HTML looks like or what event you're really trying to detect, but you probably want to use the `change` event on the select object. – jfriend00 Apr 11 '12 at 16:42
  • I will post some HTML and what I'm trying to do. Hold on a few please – JakeJ Apr 11 '12 at 16:43
  • Also, i need to execute scripts only on doubleclick so .change wouldn't suffice – JakeJ Apr 11 '12 at 16:54
0

I have found myself a workaround for this issue based off the information provided by jfriend00

As IE doesn't support the click handlers for option tags, here is what I have done:

$('select[name="CourseLevelSelector"]').live('dblclick', function () {
    var doubleClickedOption = $(this).find(':selected');

    //Do Stuff
});

It handles the doubleclick on the select box itself and gets the selected item as a jquery object for use within code.

-Jake

JakeJ
  • 1,381
  • 3
  • 14
  • 34
-1

try jQuery.on since you are using 1.7 version of jQuery.

Or

If there some Markup problem that IE is sensitive to it. It happens generally with Div ID naming conventions.

Umesh Moghariya
  • 3,063
  • 6
  • 21
  • 23