CODEWITHSUNDEEP
javascriptjqueryasp.netinternet-explorer
bradyGilley
bradyGilley

Reputation: 110

JQuery .on("mouseover") method not working for IE

I am attempting to return the value for a dynamically populated select option on mouseover. As you can probably tell by the ID, the select option is created by an ASP.NET listbox.

$("#MainContent_LocationListBox").on("mouseover", "option", function () {

    alert($(this).val());
});

This method works in Chrome but not IE 11.

I have been trying other's peoples solutions for similar problems with no luck.

What I've tried:

I've also tried $("#MainContent_LocationListBox option:hover").val() which works but very inconsistently.

I've turned on Internet Explorer debugging but no errors are returned.

Upvotes: 0

Views: 2872

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73771

You can use mousemove instead of mouseover. The code below works in Internet Explorer, Firefox and Chrome:

UPDATE: Since the test on Windows 10 failed, I added a setTimeout call, following a suggestion give here:

$(document).ready(function () {
    var prevValue = null;

    $("#MainContent_LocationListBox").mousemove(function () {
        setTimeout(function () {
            var val = $('option:hover', $("#MainContent_LocationListBox")).val();

            if (typeof val !== 'undefined') {
                if (val !== prevValue) {
                    console.log(val); // To be replaced by actual processing
                    prevValue = val;
                }
            }
            else {
                prevValue = null;
            }
        }, 0);
    });
});

When debugging mouse events, I prefer logging values in the console (which can be displayed with F12) than popping up alert boxes.

Upvotes: 2

jontetz
jontetz

Reputation: 86

Rather than adding event delegation to the select option, add it to the select.

$("#MainContent_LocationListBox").on("mouseover", function () {
  alert($(this).val());
});

Or if you would rather have event delegation

$("section").on("mouseover", "#MainContent_LocationListBox", function () {
  alert($(this).val());
});

Edit: I think you are mistunderanding how you get the value of from a select box. With jQuery you can use $('select').val() on the select box.

More information on event delegation with jQuery .on() http://api.jquery.com/on/

Upvotes: 0

Related Questions