.click() causing repeat confirm() & double duplication result

Question

Working CRUD app

---

I have/had a successful CRUD CMS working using AJAX...that is, until I added pagination with click ajax events (I'll share this script below).

+-----------------------------New-----Edit-----Duplicate-----Delete-----+
|---+---------+----------------+--------------------------------------------------|
| O | .Title | Description | ............................................................|
|---+---------+----------------+--------------------------------------------------|
| O | Item 1 | .Blah Blah. | ............................................................|
|---+---------+----------------+--------------------------------------------------|
| O | Item 2 | .Blah Blah. | ............................................................|
|---+---------+----------------+--------------------------------------------------|
| O | Item 3 | .Blah Blah. | ............................................................|
|---+---------+----------------+--------------------------------------------------|

How it works:

When the buttons edit/duplicate/delete are clicked...
1. the user gets a confirmation alert "Are you sure...?"
2. the selected checkboxes are sent via ajax to the corresponding href [.php] be actioned.
3. the page refreshes

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;
  };
};

Click:

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

The Change:

I added an ajax click pagination manager that populate id=pagination...with $('#pagination').html(response);. This pagination is working as I'd hoped.

+-----------------------------New-----Edit-----Duplicate-----Delete-----+
|---+---------+----------------+--------------------------------------------------|
| .... < 1 2 3 4 5 > .........................................................................|
| O | .Title | Description | ............................................................|
|---+---------+----------------+--------------------------------------------------|
| O | Item 1 | .Blah Blah. | ............................................................|

paginate.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;
          });
});

Problem:

Since adding the pagination.js, now...

• If I DO NOT click on any of the pagination links, the button actions work correctly as before.

• If I DO click on any of the pagination links, the button actions behave differently:
  

  1. the confirm alert happens to repeat once, twice, sometimes three times
  2. if I confirm each time is pops up, then the action finally works, with the exception of DUPLICATE...this seems to produce double duplicates depending on the number of times I've confirmed
     

Answer 1

Found it with help from stackoverflow.

I found I simply had to add e.stopImmediatePropagation() to the start of the the actionButton function. That seems to have fixed the problem nicely.

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