Jquery hover function in dynamic elements

Question

Is there any way to use the hover with jQuery in dynamically created selects options. I tried to use the function on() and the live() but it didn’t work out.

I tried so:

$(document).on('hover', '.teste', function () {
    alert("teste");
});

$(document).live('hover', '.teste', function () {
    alert("teste");
});

$(document).delegate('hover', '.teste', function () {
    alert("teste");
});

$('.teste').hover(function () {
    alert("teste");
});

I also tried with mouseover() in place of hover()

Answer 1

The first term is the event, the second is the element. But it is not enough just for the class, it has to put the element too, concatenated with the class or not. If it is a a, if it’s a div, at last.

$(document).ready(function() {
  $(document).on('mouseenter', 'div.elemento', function() {
    $(this).addClass('hover');
  }).on('mouseout', 'div.elemento', function() {
    $(this).removeClass('hover');
  });
});

.hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="elemento">
  Teste
</div>

Answer 2

The option, does not accept such customization, the solution would be to create a select from scratch, accompanied that question in the Stack Overflow I was able to implement something similar that reaches its goal:

contador = 0; // verifica se lista esta ou nao aberta

// hover na opção
$("#optionlist label").on('mouseenter', function(){
  /* muda minha div result para o texto do meu 
     label com hover*/
    $(".result").text($(this).text());  
});

// clique no input select
$("#select").on('click', function(e){
  
    e.stopPropagation(); //cancela propagração de clique
  
  if(contador == 0)
  { // se a lista tiver fechada
    $("#optionlist").show();  // abre minha lista de opções
    contador = 1;
  }
  else
  { // se a lista tiver aberta
     $("#optionlist").hide();  // fecha minha lista de opções
     contador = 0;
  }
    
});

//quando ele seleconar uma opção
$("#optionlist label").on('click', function(){ 
  
    var text = $(this).attr("id"); // pega id do radio selecionado
    $("#select").val(text); //muda o texto do select
    $("#optionlist").hide(); // fecha lista de opções
    contador = 1;
});

body{padding-top: 50px;}
label {
    display:block;
    height:21px;
    width: 100%;
}

label:hover{
    background-color: #3399FF;
}

#optionlist{
   display: none;
   position: relative;
   left: -1px;
   width: 117px;
   position: relative;
   border: 1px solid #B5B0AC;
   overflow-y: auto;
   height:60px;
}

.result{float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="result"></div>

<input name="cor" id="select" type="text" readonly value="red"/>

<fieldset id="optionlist">
  <label id="red"> red </label>
  <label id="blue"> blue </label>
  <label id="green"> green </label>   
  <label id="orange"> orange </label>       
</fieldset>

To use the chosen value, just take the value of input by name cor.