Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Asociar eventos a elementos html creados dinamicamente

JQuery - Asociar eventos a elementos html creados dinamicamente

Volver
Nuevo Tema
<<>>
 
Vista:

Asociar eventos a elementos html creados dinamicamente

Publicado por fernando (2 intervenciones) el 09/11/2014 16:51:11
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:
1
2
3
$(".color").on("load", function(e) {
    $("#color").msDropdown({visibleRows:5});
});

En este link dejo una explicacion de esto:
http://www.arumeinformatica.es/blog/jquery-asociar-eventos-a-elementos-html-creados-dinamicamente/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Asociar eventos a elementos html creados dinamicamente

Publicado por fernando (2 intervenciones) el 09/11/2014 17:49:47
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

1
2
3
$(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 al elemento SELECT cuando este es creado, y solo se le asigna cuando MUEVO EL MOUSE por el evento MOUSEMOVE, probe con onLoad pero no anda.

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

Asi quedaria:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar