Как явно выполнить действие по умолчанию из события jQuery

Question

В ответ на этот вопрос я пытаюсь реализовать ненавязчивое диалоговое окно подтверждения.

$(document).ready(function () {
    $("[data-confirmPrompt]").click(function (event) {
        var confirmPrompt = event.currentTarget.attributes['data-confirmPrompt'].value;
        event.preventDefault();
        $.prompt(confirmPrompt, {
            buttons: { Yes: true, No: false },
            callback: function (v, m, f) {
                if (v) {
                    // User clicked Yes.  Unbind handler to avoid
                    // recursion, then click the target element again
                    $(event.currentTarget).unbind('click');
                    event.currentTarget.click();
                }
            }
        });
    });
});

Когда пользователь нажал «Да», я хочу действие по умолчаниюсвязано с событием для выполнения.Я сделал это выше, отсоединив обработчик jQuery и снова щелкнув по элементу.Это прекрасно работает при отправке формы или переходе на другую страницу, но, конечно, не работает на страницах с поддержкой AJAX, где я хочу сохранить обработчик событий jQuery.действие по умолчанию?Логически что-то вроде event.executeDefault().

Answer 1

Используя предложение, высказанное Алексеем Лебедевым во втором комментарии, моя текущая реализация теперь выглядит как пример ниже, за исключением того, что я также добавил собственную реализацию локализации для меток кнопок.

Примечания:

• Я сейчас использую виджет диалога jqueryUI
• Обратите внимание на использование .delegate, так что обработчик «осведомлен о ajax», то есть работает с элементами, добавленными в DOM после загрузки страницы, например, в результате вызова AJAX
• Использует флаг, чтобы предотвратить рекурсию, когда пользователь нажимает Да в диалоговом окне подтверждения.
• Использует jquery 1.6.4 и jquery-ui-1.8.16

Если кто-то может предложить улучшения, пожалуйста, включите.

<!-- Examples of usage -->
<input type='submit' data-confirm="OK to delete customer 123?" ... />
<a href="..." data-confirm="OK to navigate?" ... />

<!-- Implementation -->
<script type="text/javascript">
    var confirmClickHandler = function (event) {
        if ($(event.currentTarget).data('isConfirming')) return;
        var message = event.currentTarget.attributes['data-confirm'].value;
        event.preventDefault();
        $('<div></div>')
                .html(message)
                .dialog({
                    title: "Confirm",
                    buttons: {
                        "Yes": function () {
                            $(this).dialog("close");
                            $(event.currentTarget).data('isConfirming', true);
                            event.currentTarget.click();
                            $(event.currentTarget).data('isConfirming', null);
                        },
                        "No": function () {
                            $(this).dialog("close");
                        }
                    },
                    modal: true,
                    resizable: false,
                    closeOnEscape: true
                });
    };

    $(document).ready(function () {
        $("body").delegate("[data-confirm]", "click", confirmClickHandler);
    });
</script>

Answer 2

Я делаю что-то подобное, и это прекрасно работает для меня:

$('#link').click(function(e){
    if(!confirm('Are you sure you want to asdf?')){
        e.preventDefault();
    }
});

Answer 3

Честно говоря, я не знаю, отвечает ли это на ваш вопрос, но это может немного помочь.

Рассмотрим следующий HTML-код:

<button onclick="alert('Hello world!');" class="btn">Test 1</button>
<button onclick="alert(this.className);" class="btn">Test 2</button>

Я добавил следующее к своему $(document).ready:

$('button').each(function() {
    var btn = $(this);
    var onClick = btn.attr('onclick');

    //replace this with _this
    onClick = onClick.replace(/this/g, "_this");

    btn.attr('onclick', '');

    btn.click(function() {
        if (confirm('Do it?')) {

            //set _this first!
            var _this = btn[0];

            eval(onClick);
        }
    });
});

Похоже, работа сделана. Проверьте этот пример jsFiddle: http://jsfiddle.net/KeesCBakker/4jThg/.

EDIT
Я создал нечто, похожее на ваш вопрос: http://jsfiddle.net/KeesCBakker/hqLH5/. Просто не мог понять, какой плагин $ .prompt вы использовали, поэтому я взял первый найденный мной из github (этот работает только в Chrome: S).