onchange select (dynamic) dropdown

Question

Я добавляю select выпадающий список и поле ввода (которое в настоящее время отключено) динамически. Я хочу получить это при выборе опции Others, поле ввода должно быть включено. Вот мой код: -

<div></div> 
<button> Add</button> 
</body> 
<script type="text/javascript"> 
    $(function(){ 
     option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>' 
     input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">' 
     html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html 
     $('button').on('click', function(){ 
      $("div").after(html); 
     }) 

     $('select.select_question').on('change', function(){ 
      alert(111) 
      $(this).closest(".others_input").prop('disabled', false); 
     }) 
    }) 
</script> 

Я не могу поймать событие onchange. jsFiddle

Answer 1

Вам необходимо делегировать:

$("#container").on('change',".select_question",function(){ 
    $(this).next(".others_input").prop('disabled', this.value!="Others"); 
}) 

Я хочу, чтобы вызвать изменение при загрузке, чтобы позволить другим сразу

Я использую .html вместо .after что то, что ты имел в виду я конечно. После того, как будет добавлен выберите ПОСЛЕ DIV вместо внутри DIV

$(function(){ 
 
    $("#container").on("change","select.select_question",function(){ 
 
    console.log(this.value) 
 
    $(this).next(".others_input").prop('disabled', this.value!="Others"); 
 
    }); 
 

 
    option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>' 
 
    input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">' 
 
    html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html 
 
    $('button').on('click', function(){ 
 
    $("#container").html(html); 
 
    $("#container select.select_question").change(); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"></div> 
 
<button> Add</button>

Answer 2

Вы используете closest в неправильном направлении, как input не родитель select но приходит рядом с ним.

Кроме того, select элемента переплетен динамически, так что вам нужно использовать делегированные обработку событий синтаксиса:

$(function(){ 
 
    option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>' 
 
    input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">' 
 
    html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html 
 
    $('button').on('click', function(){ 
 
    $("div").after(html); 
 
    }) 
 

 
     $(document).on('change', 'select.select_question', function(){ 
 
      alert(111) 
 
      $(this).next(".others_input").prop('disabled', !this.value=="Others"); 
 
     }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div></div> 
 
<button> Add</button>