Question

Following up from this question, I m trying to implement an unobtrusive confirm dialog.

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

When the user has clicked on "Yes", I want the default action associated with the event to execute. I ve done it above by unbinding the jQuery handler, and clicking the element again. This works fine when submitting a form or navigating to a different page - but of course does not work in AJAX-enabled pages, where I want to keep the jQuery event handler.

是否有执行违约行动的替代通用方法? 逻辑上如<代码>event.executeDefault(。

Answer 1

Using the suggestion Alexey Lebedev made in his second comment, my current implementation now looks like the sample below, except that I ve also added my own implementation of localization for the button labels.

注:

I m now using a jqueryUI dialog widget
Note the use of .delegate so that the handler is "ajax-aware", i.e. works on elements added to the DOM after the page is loaded, e.g. as a result of an AJAX call
Uses a flag to prevent recursion when the user clicks Yes on the confirm dialog.
Uses jquery 1.6.4 and jquery-ui-1.8.16

如果任何人都能够提出改进建议,请chim。

<!-- 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

我真心不明白,这是否回答了你的问题,但可能有助于解决问题。

Consider the following HTML:

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

我在<代码>上添加以下内容: 备妥/编码

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

看来这项工作已经完成。 http://jsfiddle.net/KeesCBakker/4jThg/“rel=”nofollow。 http://jsfiddle.net/KeesCBakker/4jThg/。

EDIT
I ve created something that looks more like your question: http://jsfiddle.net/KeesCBakker/hqLH5/. Just couldn t figure out which $.prompt plugin your were using, so I grabbed the first one I ve found from github (this one only works in Chrome :S).

Answer 4

我之所以能够做到这一点,是因为从更具体的角度打电话到<条码>。虽然你可以称之为“ default行动”(,即),但你可以创造条件,使缺席行动发生——而且与你一样少有或少有。

    // Normal event handler
    $("[data-toggle]").click(ev => {
      switchToTab(ev.currentTarget)
      ev.preventDefault()
    })

    // Allow default handler in a specific case.
    $("[data-toggle] ul a").click(ev => {
      // Don t bubble the event to the less specific handler, above
      ev.stopPropagation()
      // An incorrect return value will also cancel the default action.
      return true
    })

友情链接