Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Asociar eventos a elementos html creados dinamicamente

Estas en el tema de Asociar eventos a elementos html creados dinamicamente en el foro de Jquery en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 08/11/2014, 17:27
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 15 años, 4 meses
Puntos: 1
Asociar eventos a elementos html creados dinamicamente

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
  1. $(".color").on("load", function(e) {       
  2.     $("#color").msDropdown({visibleRows:5});                       
  3. });
En este link dejo una explicacion de esto:
http://www.arumeinformatica.es/blog/...dinamicamente/

Código HTML:
Ver original
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
  3. <script type='text/javascript' src='js/jquery-ui-1.8.9.custom.min.js'></script>
  4. <script src="js/msdropdown/jquery.dd.min.js"></script>
  5. <script type="text/javascript">
  6. window.onload = function() {
  7.    
  8.     $("#fff").on("click", function() {
  9.        
  10.         $('<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');
  11.            /*$(".color").on("load", function(e) {      
  12.             $("#color").msDropdown({visibleRows:5});      
  13.                        
  14.          });*/
  15.         return false;
  16.         });
  17. }
  18. $(document).ready(function(e) {    
  19.     $("#color").msDropdown({visibleRows:5});         
  20. });
  21. </head>
  22.                
  23. <form class="international" method="post" action="<?php $PHP_SELF ?>" id="form-join" name="addmerc">
  24.         <div id="pp" style="width: 920px;">
  25.        
  26.         <select name="color" id="color" data-usesprite="smallIcons" tabindex="-1">
  27.         <option value="0" selected="selected">Color</option>
  28.         <option value="1" class="rojo">Rojo</option>
  29.         <option value="2" class="naranja">Naranja</option>
  30.         <option value="3" class="amarillo">Amarillo</option>
  31.         <option value="4" class="verde">Verde</option>
  32.         <option value="5" class="agua">Agua</option>
  33.         <option value="6" class="azul">Azul</option>
  34.         <option value="7" class="violeta">Violeta</option>
  35.         <option value="8" class="fucsia">Fucsia</option>
  36.         <option value="9" class="negro">Negro</option>
  37.         <option value="10" class="rosado">Rosado</option>
  38.         <option value="11" class="beige">Beige</option>
  39.         <option value="12" class="crema">Crema</option>
  40.         <option value="13" class="verde-claro">Verde claro</option>        
  41.     </select>
  42.     <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>
  43.     </div>                                                                     
  44. </form>            
  45. </body>
  46. </html>

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

Última edición por Fernarey1810; 08/11/2014 a las 17:34
  #2 (permalink)  
Antiguo 09/11/2014, 10:45
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Asociar eventos a elementos html creados dinamicamente

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
  1. $(document).ready(function(e) {    
  2.     $("#color, #color1, #color2").msDropdown({visibleRows:5});       
  3. });

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
  1. $("body").on("mousemove", "select.anda", function(e) {     
  2.     $(".anda").msDropdown({visibleRows:5});                        
  3. });

Asi quedaria:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. window.onload = function() {
  3.    
  4.     $("#fff").on("click", function() {
  5.        
  6.         $('<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');
  7.            $("body").on("mousemove", "select.anda", function(e) {      
  8.               $(".anda").msDropdown({visibleRows:5});    
  9.                        
  10.            });
  11.         return false;
  12.         });
  13. }
  14. $(document).ready(function(e) {    
  15.     $("#color, #color2").msDropdown({visibleRows:5});        
  16. });
  17.  
  18. </script>

Etiquetas: asociar, dinamicamente, elementos, eventos, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:29.