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 函数，而是添加了另一个事件监听器..

因此，从输入元素中删除 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);
});

jQuery Ajax 使用动态输入时

jQuery Ajax when using dynamic inputs

ajax

jquery