Динамически созданная форма успешно направляет в контроллер, но не публикует данные AJAX

Question

Когда на экран пользователя загружается новая форма продукта, все успешно загружается в отношении HTML, CSS, трансляции событий и т. Д. Однако, когда пользователь нажимает кнопку «купить сейчас» для этого динамически добавляемого продукта, я получаю сообщение об ошибке вфункция UserController, в которую он отправляет сообщения. Это как если бы данные вообще не отправлялись.

Вот мой прослушиватель событий на стороне клиента, куда добавляется форма

var productToAdd="<div class='product' id='" + newProductData.id + "'>" +
                    "<div class='product-image'><img id='image' src='/imgs/products/" + newProductData.type + ".png'></div>" +
                    "<div class='product-content'>" +
                    "<div class='product-title' id='product-title'>" + newProductData.title.toUpperCase() + "</div>" +
                    "<div class='product-price'>PRICE PER UNIT: " +
                    "<div class='price-value' id='price'>" + newProductData.price + "</div>" +
                    " EXENS</div>" +
                    "<br/>" +
                    "QUANTITY: <div class='quantity-value' id='quantity'>" + newProductData.quantity + "</div>" +
                    "<br/>" +
                    "SELLER: <div class='seller' id='seller'>" + newProductData.seller + "</div>" +
                    "<br/>" +
                    "PRICE: <div class='total-price' id='total-price'>" + newProductData.price * newProductData.quantity + "</div>" +
                    "<br/>" +
                    "<form class='buy-product-form' action='/UoE/buy-product/" + newProductData.id + "' method='POST'>"  +
                    "<input type='hidden' name='_token' value='" + add_csrf + "'>" +
                    "<button class='pull-right btn btn-primary'>BUY NOW</button>" +
                    "</form>" +
                    "</div>" +
                    "</div>";

                $('.content').append(productToAdd);

Вот функция AJAX при нажатии кнопки. Обратите внимание, что это работает для каждого продукта, который загружается при загрузке страницы

$('form.buy-product-form').on('submit', (function (e) {
                e.preventDefault();
                var product_id = $(this).closest('.product').attr("id");
                var element = $(this).closest('.product');
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: {'id': product_id},
                    dataType: 'json',
                    success: function (data) {
                        if(data.valid_funds) {
                            updateSideBarContent(data.player_capital, data.total_price, data.player_utility,
                                data.marginal_utility, data.purchases);
                        }else {
                            window.alert("You do not have enough funds!");
                        }
                    },
                    error: function () {
                            window.alert("Error, product may no longer exist. Transaction cancelled!");
                            $(element).css('background-color', 'red');
                            $(element).fadeout("100", removeElement(element));
                    }
                });
            }));

Я получаю ошибку контроллера пользователя

ErrorException in UserController.php line 279:
Trying to get property 'quantity_available' of non-object

Вот мой код контроллера пользователя

public function buyProduct(Request $request){
        $product_id = $request->id;
        $player = Player::where('user_id', Auth::user()->id)->first();
        $product = Product::where('id', $product_id)->first();

        $totalPrice = $product->quantity_available * $product->price;
}