Johan Johan - 3 months ago 14
jQuery Question

Register a mouseover event on a <datalist>

so I'm starting to experiment with javascript/jquery and I have an input field with a datalist attached to it. The only problem I have is that when i "hover" over the datalist (once it appears) I want to trigger an event.

I have managed to trigger click and change events, but mouseover just won't work and I can't seem to find an example that works. Here is the code

<!DOCTYPE html>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript">

$(function(){
// This works
$("#browserList").on("change", function(){
console.log("changed val=" + $(this).val());
});

// This does not
$("datalist#browsers").mouseover(function(){
console.log("hovered");
});

});

</script>





<input list="browsers" id="browserList" placeholder="Find a browser">
<datalist id="browsers">
<option>Explorer</option>
<option>Firefox</option>
</datalist>





Please tell me what I am missing,
Thank you!

Answer

For mouse over use the below syntex

$("#browserList").mouseover(function(){
  //do something
})

If you want to trigger the event on options of datalist, it's not possible because they are shadow elements. please see the explanation from another SO question. This explains better about it.

Comments