Как правильно написать «Вы уверены, что хотите удалить / создать / и т. Д.?» диалоговое окно в jquery

Question

Я написал в этой теме - Как передать функцию в качестве параметра в javascript для создания запроса всплывающего окна с несколькими функциями.

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

Моя задача заключается в следующем - у меня есть несколько кнопок для каждого элемента (скажем, у меня есть несколько статей, и каждую из них я могу удалить, редактировать и т. Д.) - для каждой кнопки я хочу всплывающее окно он спрашивает меня, уверен ли я, что хочу выполнить эту задачу.

Как мне сделать это правильно?

это пример того, что происходит, когда я нажимаю на кнопку удаления:

$('.delete').click(function(){
    var obj={title:"The Header",someText:"Are you sure?"};
    DisplayPopUp(obj,function(){console.log('going to delete');});
});

после того, как у меня есть "ты уверен?" всплывающее окно - это всплывающая функция:

function DisplayPopUp(obj, callback) {

    //On Action Clicked
    $('#actionButton').click(function(e){
       e.preventDefault();
       callback(obj);
    });
}

Моя главная проблема заключается в том, что каждый раз, когда я нажимаю кнопку удаления - я умножаю функцию кнопки «Вы уверены». Как мне удалить это событие перед его повторным созданием? Где мне его поместить?

и вообще - это правильный способ сделать это или есть лучший, более чистый код (при условии, что мне нужно сделать это без использования jQuery-UI?

примите во внимание, что я хочу, чтобы он был плавным и работал над несколькими задачами, такими как создание / удаление / редактирование и т. Д. *

спасибо, Alon

=========== HTML ==============

выглядит так: - Я использую $ ('content'). Html (theContentIneed), чтобы заполнить контент и переключать режимы отображения, чтобы скрывать / отображать его.

<div id="popup">
   <div id="content">
   </div>
   <a id="actionButton">action</a>
</div>

Answer 1

Теперь, когда мы видим, что вы только скрываете / отображаете HTML (не создаете / не уничтожаете его), вы можете решить проблему слишком большого количества обработчиков щелчков, назначив обработчик событий один раз, прежде чем что-либо запускать, и используйте .data() метод для сохранения вашего контекста:

$('#actionButton').click(function(e){
   e.preventDefault();
   var fn = $(this).data("callback");
   fn();
});

function DisplayPopUp(obj, callback) {
    $('#actionButton').data("callback) = function() {callback(obj);};
    // do other stuff here to make the popup visible, etc...
}

Или, если вы действительно хотите сделать это так, как вы это делаете и используете jQuery 1.7 +:

function DisplayPopUp(obj, callback) {

    //On Action Clicked
    $('#actionButton').on('click', (function(e){
       $(this).off('click');
       e.preventDefault();
       callback(obj);
    });
}

Answer 2

Возможно, вы захотите использовать шаблон плагина jQuery:

$.fn.displayPopUp = function(data, callback) {
    return this.each(function() {
        // popup stuff
        if (typeof callback == 'function') {
            callback.call(this);
        }
    };
});


$('.delete').click(function(){
    $(this).displayPopUp({
        title: "The Header",
        someText: "Are you sure?"
    }, function() {
        console.log('going to delete');
    });
});