[SOLUCIONADO] Asociar eventos a elementos html creados dinamicamente

Fernarey1810 · #1 (**permalink**) 08/11/2014, 17:27

Alguien me puede decir porque no funciona esto?. Lo que quiero es que todos los SELECT creados dinamicamente tengan el mismo efecto que el primero. Esto creo que se soluciona con el evento ON pero probe de todas maneras y no anda.Por ej:

Código Javascript:

Ver original$(".color").on("load", function(e) {        
    $("#color").msDropdown({visibleRows:5});                        
});

En este link dejo una explicacion de esto:
http://www.arumeinformatica.es/blog/...dinamicamente/

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.9.custom.min.js'></script>
<script src="js/msdropdown/jquery.dd.min.js"></script>
<script type="text/javascript">
window.onload = function() {
    
    $("#fff").on("click", function() {
        
        $('<select name="color" id="color" data-usesprite="smallIcons" style="width:130px; float: left; margin-right: 10px;"><option value="0" selected="selected">Color</option><option value="1" class="rojo">Rojo</option><option value="2" class="naranja">Naranja</option><option value="3" class="amarillo">Amarillo</option><option value="4" class="verde">Verde</option><option value="5" class="agua">Agua</option><option value="6" class="azul">Azul</option></select>').appendTo('#pp');
           /*$(".color").on("load", function(e) {       
            $("#color").msDropdown({visibleRows:5});      
                        
         });*/
        return false;
        });
}
$(document).ready(function(e) {     
    $("#color").msDropdown({visibleRows:5});          
});
</script>
</head>
<body>
                
<form class="international" method="post" action="<?php $PHP_SELF ?>" id="form-join" name="addmerc">
        <div id="pp" style="width: 920px;">
        
        <select name="color" id="color" data-usesprite="smallIcons" tabindex="-1">
        <option value="0" selected="selected">Color</option>
        <option value="1" class="rojo">Rojo</option>
        <option value="2" class="naranja">Naranja</option>
        <option value="3" class="amarillo">Amarillo</option>
        <option value="4" class="verde">Verde</option>
        <option value="5" class="agua">Agua</option>
        <option value="6" class="azul">Azul</option>
        <option value="7" class="violeta">Violeta</option>
        <option value="8" class="fucsia">Fucsia</option>
        <option value="9" class="negro">Negro</option>
        <option value="10" class="rosado">Rosado</option>
        <option value="11" class="beige">Beige</option>
        <option value="12" class="crema">Crema</option>
        <option value="13" class="verde-claro">Verde claro</option>        
    </select>
    <a href="" id="fff" style="margin-top: 5px; color: #03B; cursor: pointer; display: block; width: 400px; float:left; ">Agregar otro color, talle y cantidad</a>
    </div>                                                                      
</form>             
</body>
</html>

De aca se descarga ms-Dropdown
https://github.com/marghoobsuleman/ms-Dropdown

Fernarey1810 · #2 (**permalink**) 09/11/2014, 10:45

Lo solucione de esta manera, no se si es la mejor forma pero esta resuelto el problema.

Aca tengo que agregar todos los select que voy a agregar, como son dinamicos y no se exactamente cuantos se agregaran, tendre que pone varios #color2, #color3, #color4, #color5 ... etc

Código Javascript:

Ver original$(document).ready(function(e) {     
    $("#color, #color1, #color2").msDropdown({visibleRows:5});        
});

y esto es lo que hace que funcione, efectivamente con el evento ON se soluciona este problema.
Aun asi no funciona como quiero porque yo quisiera que el evento se le asigne al SELECT cuando este es creado, y solo se le asigna cuando MUEVO EL MOUSE por el evento MOUSEMOVE, probe con onLoad pero no anda.

Código Javascript:

Ver original$("body").on("mousemove", "select.anda", function(e) {      
    $(".anda").msDropdown({visibleRows:5});                         
});

Asi quedaria:

Código Javascript:

Ver original<script type="text/javascript">
window.onload = function() {
    
    $("#fff").on("click", function() {
        
        $('<select name="color" class="anda" id="color2" data-usesprite="smallIcons" style="width:130px; float: left; margin-right: 10px;"><option value="0" selected="selected">Color</option><option value="1" class="rojo">Rojo</option><option value="2" class="naranja">Naranja</option><option value="3" class="amarillo">Amarillo</option><option value="4" class="verde">Verde</option><option value="5" class="agua">Agua</option><option value="6" class="azul">Azul</option></select>').appendTo('#pp');
           $("body").on("mousemove", "select.anda", function(e) {       
              $(".anda").msDropdown({visibleRows:5});     
                        
           });
        return false;
        });
}
$(document).ready(function(e) {     
    $("#color, #color2").msDropdown({visibleRows:5});         
});
 
</script>