Javascript未在附加內容上顯示輸入字段

Question

我有一個簡單的輸入字段，例如：

<div class="col-md-3">
  {{ Form::label('stock', 'Stock') }}
  <input type="text" value="" class="stock form-control" name="stock" disabled>
</div>

而且我還有JavaScript代碼，在后端工作正常，結果是成功200

<script type="text/javascript">
  $(document).ready(function() {
    $("select[name='product_id']").on("change", function() {
      var productID = $(this).val();
      if(productID) {
      $.ajax({
        url: "{{ url("admin/getProductInfo") }}/"+encodeURI(productID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $(".stock").empty().append("<input type='text' value='' class='form-control stock' name='stock' disabled>");
        $.each(data, function(key, value) {
            $(".stock").append("<input type='text' class='form-control stock' value="value['stock']" name='stock' disabled>");
            });
        }
      }); //ajax
      }else{
        $(".stock").empty().append("<input type='text' value='' class='form-control stock' name='stock' disabled>");
      }
    });
  });
</script>

我的問題是成功append將不會替換為我的靜態輸入。

我在select上使用時會使用相同的代碼，並且可以工作，但是對於輸入來說卻不起作用。

Answer 1

您要將輸入追加到輸入，請嘗試將stock類添加到div，然后在其中添加子級輸入，例如：

<div class="col-md-3 stock">
  {{ Form::label('stock', 'Stock') }}
  <input type="text" value="" class="form-control" name="stock" disabled>
</div>


 $(document).ready(function() {
    $("select[name='product_id']").on("change", function() {
      var productID = $(this).val();
      if(productID) {
      $.ajax({
        url: "{{ url("admin/getProductInfo") }}/"+encodeURI(productID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $(".stock").empty();
        $.each(data, function(key, value) {
            $(".stock").append("<input type='text' class='form-control' value='"+value['stock']+"' name='stock' disabled>");
            });
        }
      }); //ajax
      }else{
        $(".stock").empty().append("<input type='text' value='' class='form-control' name='stock' disabled>");
      }
    });
  });

如果數據僅返回一個對象，請嘗試：

$('.stock').val(''); //Just to follow what OP has earlier and no need of else statement again
if(productID){
    //ajax stuff
    success:function(data) {
          //Clear the input's value

          if(data.length > 0){
             $(".stock input[type='text']").val(data[0].stock);
             //data[0].stock will be good if its parsed json
          }
    }
}