Skip to main content
5 de 6
Errores de ortografía
Mariano
  • 24.5k
  • 20
  • 76
  • 105

¿Por qué elementos dinámicos no ejecutan las funciones definidas con anterioridad?

Tengo este código con los elementos creados inicialmente funciona de maravilla pero una vez que usas el botón de añadir los nuevos elementos no ejecutan la función.

Aquí mi código (también en jsfiddle):

$(".selectClass").change(function() {
  $("select option").prop("disabled", false);
  $(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
  console.log('in');
});

$(".addButton").click(function() {
  $('.myOptions').append(`<select class="selectClass">
                            <option value="default">Select one</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>`);
})
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<button class="addButton">Add</button>
<div class="myOptions">
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

Mi código lo que hace es que, una vez elegida una opción, en los demás select la deshabilita, cosa que no funciona con los select añadidos dinámicamente. ¿Alguien sabe porqué?

EDIT: Ya logré que ejecute la función volviéndola a escribir después de crear el elemento. Ahora lo que pasa es que los nuevos elementos no aparecen con las opciones deshabilitadas en los otros.