.click() 导致重复确认（）和重复结果

Question

工作 CRUD 应用程序

---

我有/有一个使用 AJAX 工作的成功 CRUD CMS...也就是说，直到我添加了带有 click ajax 事件的分页（我将在下面分享这个脚本）。

+-----------------------------新建-----编辑-----复制---- -删除-----+
|---+----------+----------------+------------------ --------------------------------|
| ○ | .标题 | 说明 | ..................................................... ..........|
|---+----------+----------------+------------------ --------------------------------|
| ○ |项目 1 | .Blah Blah。 | ..................................................... ..........|
|---+----------+----------------+------------------ --------------------------------|
| ○ |项目 2 | .Blah Blah。 | ..................................................... ..........|
|---+----------+----------------+------------------ --------------------------------|
| ○ |项目 3 | .Blah Blah。 | ..................................................... ..........|
|---+----------+----------------+------------------ --------------------------------|

工作原理：

当点击按钮 edit/duplicate/delete...
1. 用户会收到确认警报“您确定...？”
2.选中的复选框通过ajax发送到对应的href [.php]被操作。
3.页面刷新

function actionButton () {
  if($(this+' span').hasClass("dead")) { }else{
        page    = $(this).attr("href");
        ids     = new Array()
        a       = 0;
        $(".chk:checked").each(function(){
           ids[a] = $(this).val();
           a++;
        })      
        if (confirm("Are you sure you want to affect the selected record(s)?")) {
         $.ajax({
                url         :   page,
                type        :   "POST",
                data        :   "id="+ids,
                cache       :   false,
                dataType    :   'json'
                })                              // end AJAX
         .done(function(data) {                     
              window.console.log(data);         // log data to the console so we can see                                                    
                                            // Handle ERRORS
                                            // After form submission, redirect a user
                                            // to another page
                window.location.reload();

          })
         .fail(function(data) {             // promise callback
              window.console.log(data);         // show any errors in console
          });
        }                                       // end CONFIRMed
        return false;
  };
};

点击：

$(document).ready(function() {      
    $('#btn_del').click(actionButton);          // DELETE record(s) button

    $('#btn_pub').click(actionButton);          // PUBLISH record(s) button

    $('#btn_unpub').click(actionButton);        // UNPUBLISH record(s) button

    $('#btn_dup').click(actionButton);          // DUPLICATE record(s) button
                                                // ----------------------------------
                                                // This feature is currently configured
                                                // to only allow duplication of
                                                // one(1) x record at a time
                                                // The configurations above disable
                                                // the DUPLICATE button when more
                                                // than one(1) record is checked
});

变化：

我添加了一个填充 id=pagination... 和 $('#pagination').html(response); 的 ajax 点击分页管理器。这个分页正如我所希望的那样工作。

+-----------------------------新建-----编辑-----复制---- -删除-----+
|---+----------+----------------+------------------ --------------------------------|
| .... 1 2 3 4 5 > ......................... ................................................| | ○ | .标题 | 说明 | ..................................................... ..........|
|---+----------+----------------+------------------ --------------------------------|
| ○ |项目 1 | .Blah Blah。 | ..................................................... ..........|

分页.js

$(function(){
    $.ajax({
          url       : "populateRecordsPaginate.php",
          type      : "POST",
          data      : "actionfunction=showData&page=1",
          cache     : false,
          success   : function(response){ 
                        $('#pagination').html(response);
                      }
    });
          $('#pagination').on('click','.page-numbers',function(){
               $page = $(this).attr('href');
               $pageind = $page.indexOf('page=');
               $page = $page.substring(($pageind+5));

                $.ajax({
                    url     : "populateRecordsPaginate.php",
                    type        : "POST",
                    data        : "actionfunction=showData&page="+$page,
                    cache       : false,
                    success : function(response){
                                  $('#pagination').html(response);
                                }
                });
                return false;
          });
});

问题：

自从添加了 pagination.js，现在...

• 如果我不点击任何pagination links，按钮操作会像以前一样正常工作。

• 如果我确实点击任何pagination links，按钮操作的行为会有所不同：
  

  1. confirm alert 碰巧重复了一次、两次，有时是三次
  2. 如果我确认每次都会弹出，那么操作最终会起作用，但 DUPLICATE 除外...这似乎会根据我的次数产生双重重复确认ed
     

Answer 1

在 stackoverflow 的帮助下找到它。

我发现我只需将 e.stopImmediatePropagation() 添加到 actionButton 函数的开头即可。这似乎很好地解决了这个问题。

function actionButton (e) {
    e.stopImmediatePropagation();