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的时候触发改变，这是你的意思我当然。之后将添加在SELECT之后的股利，而不是你在错误的方式使用closest作为input在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

不是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>