jQuery blur event fires only once

Question

I'm making a script to manage a shopping cart and I wanted to attach a blur event to the input field where you can change the quantity of a product.

The problem is the event only fires once. After that I have to refresh the page to enable it again.

Right now I have this:

    jQuery(document).ready(function($) {
    $("input",".fila_producto").each(function() {
        $(this).on('focusout', {param: $(this).parent().parent().attr('id')}, updateCantidadProducto);
    });
});

In the script I use as a parameter the ID of the row and I'm using the input to check its value.

The function to make the request is this one:

function updateCantidadProducto(event){
    var id = event.data.param;
    var cantidad = $(this).val();

    var datos = {   
        "modify" : true,
        "identificador" : id,
        "cantidad": cantidad
    };

    $.ajax({
        data: datos,
        url: 'carrito.php',
        type: 'post',
        success: function(response){
            $("#aside").replaceWith(response);
        }
    }); 

}

It works nice the first time but then the event doesn't work. Any suggestions on how bad I made this?

Answer 1

This should do what you're asking.

(function($){
    $(document).on('blur',
                  'input,.fila_producto',
                  {param: $(this).parent().parent().attr('id')},
                   updateCantidadProducto
                  );
}(jQuery));