使用動態輸入時的jQuery Ajax

Question

我有動態創建的輸入，我試圖使用onBlur提交它們的值。我仍然對jQuery和AJAX不熟悉，有人可以向我解釋爲什麼函數沒有被調用嗎？

輸入：

<input type="text" class="quantity" onblur="updateQuantity()" name="quantity[]"/> 

腳本：

<script> 
    function updateQuantity() { 

     $(".quantity").blur(function(){ 
      var quantityValue = $(this).val(); 
      $.ajax({ 
       url: "pages/inventory_request_action.php", 
       cache: false, 
       type: 'POST', 
       data: quantityValue, 
       success: function(data) { 
        // do something 
       } 
      }); 
     }); 
    } 
</script> 

Answer 1

您註冊blur事件偵聽器兩次（一次在你輸入元素上onblur屬性，而另一個在updateQuantity功能）。所以真正發生的事情是一旦輸入模糊，你實際上沒有調用ajax函數，而是添加另一個事件監聽器。

因此，從你的input元素中刪除onblur="updateQuantity()"，因爲你添加了相同的監聽器通過jquery，並重新安排updateQuantity函數中的邏輯，以便它只進行ajax調用，而不用擔心添加事件監聽器。

http://jsfiddle.net/xvtp3vrd/

HTML

<input type="text" class="quantity" name="quantity[]"/> 

的Javascript

function updateQuantity(quantityValue){ 

    alert('submitting quantityValue: ' + quantityValue); 
    $.ajax({ 
     url: "pages/inventory_request_action.php", 
     cache: false, 
     type: 'POST', 
     data: {quantityValue: quantityValue}, 
     success: function(data) { 

     } 
    }); 
} 

$('.quantity').blur(function(){ 

    var val = $(this).val(); 
    updateQuantity(val); 
});