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

This is my code:

这是我的代码:

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

I have an modal from boostrap with a form, which do an insert or an update in db. It works fine, BUT my problem is when I add a new item in db through ajax, after that when I want to add another item, somehow it inserts in db the same item two times, after that I add another item, it inserts in db the same item 3 times, ... 4 times .... and the cycle repeats. But If I refreshed the page after the ajax event, it works fine. Can someone help with this ?

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

1 个解决方案

#1

At a guess I'd say your on-click event is probably firing more than once, because it's getting bound to the elements multiple times in a chain.

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

I'd suggest pulling out your ajax code into a separate function, and then calling .unbind.bind, to make sure the handler is only called once, something like so:

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

#1