Foros del Web - Ver Mensaje Individual - 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