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)