1

Estoy construyendo un serie de select multiple que clono de una matrís básica.

Inicialmente creo uno y a medida que se selecciona una option de la lista se va creando un par Nombre:Valor dinámicamente. Hasta aquí todo bien.

Luego necesito usando un botón + crear nuevos select multiple partiendo nuevamente de la matrís inicial. Todo esto en una modal de Bootstrap.

El problema está en que a partir del segundo elemento clonado, que son creados usando el botón de +, no se crean los pares Nombre:Valor que necesito.

El resultado debe ser algo como esto:

introducir la descripción de la imagen aquí

Como dije, el código me funciona para el primer clone que lo construyo en el momento de abrir la modal, pero las siguiente que se añaden a partir del clic en el botón + no:

$('#cloned-access-level .access-level.level-cloned').each(function(){
    var item    = $(this)
        list    = item.find('select[name="adviser"]')

    list.on('change', function(){
        ...
    })
})

Supongo que lo que debo hacer es hacer que este código funcione sobre los elementos clonados, pero no lo logro.

Gracias de antemano.

1 respuesta 1

1

Cuando creas un nuevo elemento a partir de un script, las funciones que defines no los afectan si quieres acceder a ellas directamente, este es un ejemplo:

$('.add').on('click', function(){
  $('.wrap').append('<li class="item">Item '+($('.item').length+1) +'</li>');
});

$('.item').on('click', function(){
  $(this).toggleClass('active');
});
.wrap{
  list-style: none;
}

.item{
  cursor: pointer;
  padding: 20px;
  max-width: 200px;
  background-color: pink;
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.active{
  background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
  <li class="item">Item 1</li>
</ul>
<button class="add">Add item</button>

Lo que puedes hacer es asignar el evento al documento y pasar como selector lo que quieres que active el evento:

$('.add').on('click', function(){
  $('.wrap').append('<li class="item">Item '+($('.item').length+1) +'</li>');
});

$(document).on('click', '.item', function(){
  $(this).toggleClass('active');
});
.wrap{
  list-style: none;
}

.item{
  cursor: pointer;
  padding: 20px;
  max-width: 200px;
  background-color: pink;
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.active{
  background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
  <li class="item">Item 1</li>
</ul>
<button class="add">Add item</button>

1
  • Gracias, me ha funcionado perfecto, aunque ahora tengo otros problemillas pero ando trabajando en ellos +1
    – Roger TM
    el 4 dic. 2019 a las 17:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.