AJAX事件執行多次 - 怪異的行爲

Question

這是我的代碼：

$(document).ready(function() { 
    $('#myModal1').on('shown.bs.modal', function (event) { 
     $(".save_profile_name").click(function(){ 
      var pro_id   = $("#profile_id").val(); 
      var pro_name  = $("#profile_name").val(); 
      var pro_description = $("#profile_description").val(); 
      if (pro_id != ""){ 
       $.ajax({ 
        type: "POST", 
        url: "myURL", 
        data: { 
          pro_id: pro_id, 
          pro_name: pro_name, 
          pro_description: pro_description 
          } 
       }).done(function(json) { 
        $('#myModal1').modal('hide'); 
       }); 
      }else{ 
       $.ajax({ 
        type: "POST", 
        url: "myURL", 
        data: { 
          pro_id: pro_id, 
          pro_name: pro_name, 
          pro_description: pro_description 
          } 
       }) .done(function(event) { 
        $('#myModal1').modal('hide'); 
       }); 
      } 
     }); 
    }); 

我有一個從自舉一個模式有一種形式，它做的插入或數據庫的更新。它工作正常，但我的問題是當我通過ajax添加一個新的項目在數據庫中，之後，當我想添加另一個項目，不知何故它插入在db中相同的項目兩次，之後，我添加另一個項目，它在db中插入相同的項目 3次，... 4次....並重復循環。但是如果我在ajax事件之後刷新頁面，它可以正常工作。有人可以幫忙嗎？

Answer 1

在猜測中，我會說你的點擊事件可能會不止一次地發射，因爲它在鏈中多次綁定元素。

我建議拔出你的Ajax代碼放到一個單獨的函數，然後調用.unbind.bind，以確保處理程序只調用一次，像這樣：

var handleProfileClick = function() { 
     var pro_id   = $("#profile_id").val(); 
     var pro_name  = $("#profile_name").val(); 
     var pro_description = $("#profile_description").val(); 
     if (pro_id != ""){ 
      $.ajax({ 
        type: "POST", 
        url: "myURL", 
        data: { 
          pro_id : pro_id, 
          pro_name : pro_name, 
          pro_description : pro_description 
         } 
      }).done(function(json) { 
       $('#myModal1').modal('hide'); 
      }); 
     }else{ 
      $.ajax({ 
        type: "POST", 
        url: "myURL", 
        data: { 
          pro_id : pro_id, 
          pro_name : pro_name, 
          pro_description : pro_description 
         } 
      }) .done(function(event) { 
        $('#myModal1').modal('hide'); 
      }); 
     } 

    } 

    var handleModalShow = function(event) { 
     // do anything else you need here, or just delete the function 
    } 
    $('#myModal1').on('shown.bs.modal', function (event) { 
     handleModalShow(); 
    }); 
    $("#myModal1 .save_profile_name").unbind('click', handleProfileClick).bind('click', handleProfileClick)