.click () вызывает повторное подтверждение () & amp; результат двойного дублирования

Рабочее приложение CRUD


У меня была / была успешная CRUD CMS, работающая с использованием AJAX … то есть, пока я не добавил нумерацию страниц с событиями click ajax (я поделюсь этим сценарием ниже).

+——————————Новая —— Изменить —— —— Дубликат Удалить —— +
| — + ——— + —————- + —————— ——————————— |
| O | ,заглавие | Описание | ………………………………………….. ………. |
| — + ——— + —————- + —————— ——————————— |
| O | Элемент 1 | Бла Бла. | ………………………………………….. ………. |
| — + ——— + —————- + —————— ——————————— |
| O | Элемент 2 | Бла Бла. | ………………………………………….. ………. |
| — + ——— + —————- + —————— ——————————— |
| O | Пункт 3 | Бла Бла. | ………………………………………….. ………. |
| — + ——— + —————- + —————— ——————————— |

Как это устроено:

Когда кнопки 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
});

Изменение:

Я добавил менеджер пагинации ajax click, который заполняет id=pagination…с $('#pagination').html(response);, Эта нумерация страниц работает, как я и надеялся.

+——————————Новая —— Изменить —— —— Дубликат Удалить —— +
| — + ——— + —————- + —————— ——————————— |
| …. < 1 2 3 4 5> ……………………………………… ………………………. |
| O | ,заглавие | Описание | ………………………………………….. ………. |
| — + ——— + —————- + —————— ——————————— |
| O | Элемент 1 | Бла Бла. | ………………………………………….. ………. |

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

Проблема:

Так как добавление pagination.js, сейчас …

  • Если я НЕ ДЕЛАЙТЕ нажмите на любой из pagination links, действия кнопок работают правильно, как и раньше.
  • Если я ДЕЛАТЬ нажмите на любой из pagination linksДействия кнопок ведут себя по-разному:

    1. confirm alert случается повторить один раз, два раза, иногда три раза
    2. Если я подтвердить каждый раз, когда всплывает, затем действие наконец работает, за исключением DUPLICATE … это, кажется, производит двойные дубликаты в зависимости от того, сколько раз я подтвердитьиздание

2

Решение

Нашел с помощью переполнение стека.

Я обнаружил, что просто должен был добавить e.stopImmediatePropagation() в начало функции actionButton. Кажется, это хорошо решило проблему.

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

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]