PUTリクエストが複数回呼び出されています

Question

私はAjax/jQueryを初めて使用しており、httpメソッドPUTを使用してdjangoモデルを更新する必要があります。現在のコードはという1つの問題：PUTのリクエストは、新しい変更ボタンをクリックしてフォームを送信するたびに複数回+ 1回実行されています。 AJAX用

(index):121 BUTTON: Pressed modify on product ID: 87 
(index):133 GET: Looped through products for ID 87 and set the values in the modal accordingly 
(index):153 PUT: Received put request for ID: 87 
(index):121 BUTTON: Pressed modify on product ID: 88 
(index):133 GET: Looped through products for ID 88 and set the values in the modal accordingly 
(index):153 PUT: Received put request for ID: 87 
(index):153 PUT: Received put request for ID: 88 
(index):121 BUTTON: Pressed modify on product ID: 89 
(index):133 GET: Looped through products for ID 89 and set the values in the modal accordingly 
(index):153 PUT: Received put request for ID: 87 
(index):153 PUT: Received put request for ID: 88 
(index):153 PUT: Received put request for ID: 89 

コード：

console.log経由例に

//  MODIFYING A PRODUCT 
product_ul.on("click", ".modify", function() { // On clicking modify 
    var id = $(this).parents('li').attr('id'); // Get the PK which is the ID of the <li> 
    console.log("BUTTON: Pressed modify on product ID: " + id); 
    $.ajax({ 
     type: 'GET', 
     url: 'get/', 
     dataType: 'json', 
     success: function (data) { 
      $.each(data, function (key, value) { // Loop through all products from the json response 
       if (value.id == id) { // If PK matches product PK from response 
        $('#dataModal').modal("show"); // Show modal 
        $('#edit_name').val(value.name); // Set the values 
        $('#edit_description').val(value.description); 
        $('#edit_price').val(value.price); 
        console.log("GET: Looped through products for ID " + id + " and set the values in the modal accordingly"); 
       } 
      }); 
     } 
    }); 
    $("#modify_product_form").submit(function (event) { // On submitting the modify form 
     event.preventDefault(); // Prevent refresh 

     var product_data = { // Get the values from the form 
      name: $('#edit_name').val(), 
      description: $('#edit_description').val(), 
      price: $('#edit_price').val() 
     }; 

     $.ajax({ 
      type: 'PUT', 
      url: 'modify/' + id + '/', 
      data: product_data, 
      beforeSend: function (xhr) { 
       xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}"); 
       console.log("PUT: Received put request for ID: " + id); 
      }, 
      success: function (product) { 
       var product_html = "<li id=" + product.id + "><button class='delete btn btn-xs btn-danger'><span class='glyphicon glyphicon-remove'></span></button>" + 
        " <button class='modify btn btn-xs btn-warning'><span class='glyphicon glyphicon-cog'></span></button> " + 
        product.name + "</li>"; 
       $('#' + product.id).html(product_html); // Change the html to the modified version so it updates the list 
       $('#dataModal').modal("hide"); // Hide the modal 
      } 
     }); 
    }); 
}); 

これは、Webページがどのように見えるかです：

し、変更ボタンをクリックした後：

私の唯一の仮定は、これまで$("#modify_product_form").submit(function (event)がproduct_ul.on("click", ".modify", function()内したがって、いくつかの競合を引き起こしているということですが、私は、ネストされたそれらをせずにvar idを得ることができる方法が他に知りません。私はconsole.logのように見えることを期待する方法

：

(index):121 BUTTON: Pressed modify on product ID: 87 
(index):133 GET: Looped through products for ID 87 and set the values in the modal accordingly 
(index):153 PUT: Received put request for ID: 87 
(index):121 BUTTON: Pressed modify on product ID: 88 
(index):133 GET: Looped through products for ID 88 and set the values in the modal accordingly 
(index):153 PUT: Received put request for ID: 88 
(index):121 BUTTON: Pressed modify on product ID: 89 
(index):133 GET: Looped through products for ID 89 and set the values in the modal accordingly 
(index):153 PUT: Received put request for ID: 89 

私は他のコードを提供しなければならないなら、私が知っているし、あなたの目は私のアマチュアコーディングを見てから傷つける場合、私は謝罪してください！

Answer 1

あなたのフォームの提出イベントハンドラ（// On submitting the modify form）製品（// On clicking modify）用内部のあなたのクリックハンドラを追加しています。つまり、製品ulをクリックするたびに、サブミットイベントハンドラの新しいコピーが追加されます。フォームが提出されると、これらのコピーがすべて呼び出され、それらはすべてPUT要求を行います。

解決策は、フォームの送信ハンドラを途中で、つまりクリックハンドラの外側に移動することです。それは一度だけ追加されることを確認します。