javascript - 无法使用 $(this).val ("") 清空值；

Question

这个问题已经有答案了:

How does the "this" keyword work, and when should it be used? (22 个回答)

已关闭 5 年前。

我试图根据产品名称将产品详细信息添加到表中，该产品名称可以从以下输入框中收集。

 <input type="text"  autofocus class="form-control" id="productSearch"  placeholder="Product name"> 

但问题是添加值后无法清空文本框并转到上一个输入框。如何将其清空并仅聚焦同一个输入框？

 $( "#productSearch" ).change(function(event) {    
  $.ajax({
    type: "get",
    url: "{!! asset('searchByProductName') !!}",
    dataType: 'json',
    data: { name:this.value },
    success: function(response){
      if ($('#' + response.id).length !== 0) {
        return false; 
      }

     var markup = "<tr id="+response.id+"><input type='hidden' name='product_id[]'  value="+response.id+"><td><i class='flaticon-delete-1 delete-row' onclick='deleteRow(this)'></i></td><td>"+response.product_name+"</td><td>"+response.product_unit_price+"</td><td><input type='text' name='quantity[]' class='quantity' value='1'></td><td class='total'>"+response.product_unit_price+"</td><td>"+response.notes+"</td></tr>";

      $("table tbody").append(markup);      
      $(this).val(""); 
      return false; 
      event.preventDefault();
     }   
  }); 
});

Answer 1

问题出在 this 上，因为它没有引用 $("#productSearch")，因为您在函数内部使用了它。由于 $("#productSearch") 引用单个元素，因此如果您使用它代替 $(this)，则不会有任何问题。

或者，您可以在$.ajax中使用event.target或context: this，如下所示:

$("#productSearch").change(function(event) {
     $.ajax({
         context: this,
         type: "get",
         url: "{!! asset('searchByProductName') !!}",
         dataType: 'json',
         data: {
             name: this.value
         },
         success: function(response) {
             //...
             $(this).val("");
         }
     });
 });