Ajax事件多次执行 - 奇怪的行为

时间:2015-03-25 12:30:11

标签: jquery ajax

这是我的代码:

$( 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');
               });
           }
       });
   });

我有一个带有表单的boostrap的模态,它在db中执行插入或更新。它运行正常,但我的问题是当我通过ajax在db中添加一个新项目之后,当我想添加另一个项目时,不知何故它在db中插入相同的项目两次,之后我添加另一个项目,它在db中插入相同的 3次,... 4次....并且循环重复。但是如果我在ajax事件之后刷新页面,它可以正常工作。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:2)

我猜你的on-click事件可能不止一次触发,因为它在链中多次绑定到元素。

我建议将你的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)