Hover JQuery function on dynamic elements

Question

Hover JQuery function on dynamic elements

Navigation

#1 by (1 votes)
#2 by (1 votes)

4

Is there any way to use the hover event with jQuery in dynamically created selects options. I tried to use the function on() and live() but it did not work.

I tried this way:

$(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() instead of hover()

jquery hover

asked by anonymous 28.01.2016 / 16:47

2 answers

Using KEY element JPA does not reflect the changed data in the DB manually

score 1 · Answer 1

The first term is the event, the second is the element. But it is not enough for just the class, it has to be for the element also, concatenated with the class or not. If it is a a , if it is a div , anyway.

$(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><divclass="elemento">
  Teste
</div>

score 1 · Answer 2

option , does not accept such customization, the solution would be to create a select from zero, accompanied by this question in Stack Overflow I was able to implement something similar and achieve 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><divclass="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 value chosen, just get the value of input with name cor .