JQuery пользовательская проверка ошибки обратного вызова

Question

В моем проекте я использую пользовательский Confirmation dialogue, который использует метод JQuery.

Пользовательские Функция

function conf_close() { 
$('.conf-cont-main').remove(); 
} 
function confirmMsg(message, callback) 
{ 
    $('.conf-main').remove(); 
    var cont = '<div class="conf-cont-main"><div class="conf-main">\n\ 
    <span class="conf-close" onclick="conf_close()">X</span>\n\ 
    <div class="conf-head">\n\ 
    Confirm Action\n\ 
    </div>\n\ 
    <div class="conf-body">\n\ 
    ' + message + '\n\ 
    </div>\n\ 
    <div class="conf-button">\n\ 
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-yes">Yes</button>\n\ 
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-no">No</button>\n\ 
    </div>\n\ 
    </div></div>'; 
    $('body').prepend(cont); 
    $(document).on('click', '#conf-yes', function() 
    { 
     callback(true); 
    }); 
    $(document).on('click', '#conf-no', function() 
    { 
     callback(false); 
    }); 
} 

Я называю эту функцию как

var c = confirmMsg('Are You Sure to Delete?', function(c) { 
    if (c == true) { 
     alert('true'); 
     conf_close(); 
     //ajax call 
    } 
    else{ 
     alert('false'); 
     conf_close(); 
    } 
}); 

Вопрос в том, когда я называю confirmMsg() впервые, он работает, как ожидалось, и alrt() будет отображаться один раз. Когда я звоню confirmMsg() во второй раз. он показывает предупреждение 2 раза и так далее.

Как решить эту проблему? Любая помощь может быть оценена. скрипку ссылка пример JSFiddle

Answer 1

Это из-за этих строк кода:

$(document).on('click', '#conf-yes', function() 
{ 
    callback(true); 
}); 
$(document).on('click', '#conf-no', function() 
{ 
    callback(false); 
}); 

Вы добавляете события каждый раз, когда его называют, поэтому они бегут несколько раз. Попробуйте изменить это:

$('#conf-yes').off('click'); 
$('#conf-no').off('click'); 
$(document).on('click', '#conf-yes', function() 
{ 
    callback(true); 
}); 
$(document).on('click', '#conf-no', function() 
{ 
    callback(false); 
}); 

Хотя это, вероятно, будет умнее, чтобы настроить ваши JS так это только добавляет событие один раз (предположительно, вне времени вызова этой функции), то .off() будут удалены предыдущие события кликов, поэтому, когда вы добавляете их снова, у вас не будет дубликатов.

Но если вы хотите, чтобы двигаться вперед с этим кодом, вы также можете сократить его немного:

$('#conf-yes').off('click').on('click', function() 
{ 
    callback(true); 
}); 
$('#conf-no').off('click').on('click', function() 
{ 
    callback(false); 
}); 

Answer 2

Вы связывающую click событий несколько раз на каждом клике он связывает новый щелчок.

Вы должны сделать

function conf_close() { 
    $('.conf-cont-main').remove(); 
} 
function confirmMsg(message, callback) { 
    $('.conf-main').remove(); 
    var cont = '<div class="conf-cont-main"><div class="conf-main">\n\ 
    <span class="conf-close" onclick="conf_close()">X</span>\n\ 
    <div class="conf-head">\n\ 
    Confirm Action\n\ 
    </div>\n\ 
    <div class="conf-body">\n\ 
    ' + message + '\n\ 
    </div>\n\ 
    <div class="conf-button">\n\ 
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-yes" onclick="conf_click(true);">Yes</button>\n\ 
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-no" onclick="conf_click(false);">No</button>\n\ 
    </div>\n\ 
    </div></div>'; 
    $('body').prepend(cont);  
} 

function conf_click(arg) { 
    callback(arg); 
}