开发者

jQuery simulating a click after default event was prevented

开发者 https://www.devze.com 2023-04-08 08:28 出处:网络
I\'m having some smashing time with jQuery again, this time it doesn\'t quite work on calling .click().

I'm having some smashing time with jQuery again, this time it doesn't quite work on calling .click().

The idea is to have a singleton class that looks for any elements tagged with ui-hint-confirm and show a confirm dialog. If user clicks OK the original element is clicked, else dialog simply closed. But since code can say more than thousand words:

ConfirmDialogManager = function () {
    var _dialogShown = false;
    var ensureDialog = function (target, text) {
        var targetEl = $(target);
        if (!text) {
            text = targetEl.attr('title');
            text = text == null || text == '' ? 'Are you sure?' : text += '?';
        }
        var el = $('div#dlgConfirm');
        if (el.length == 0)
            el = $('<div id="dlgConfirm"></div>');
        el.dialog({
            autoOpen: false,
            modal: true,
            width: 300,
            height: 150,
            minWidth: 200,
            minHeight: 130,
            title: 'Please confirm',
            maxHeight: 500,
            position: 'center',
            open: function () {
                $(this).css({ 'max-height': 500, 'overflow-y': 'auto' });
            },
            butto开发者_如何学JAVAns: {
                'OK': function (ev) { onConfirm.call(target, ev); },
                'Cancel': function (ev) { onCancel.call(target, ev); }
            }
        });
        el.html(text);
        $('div#dlgConfirm').dialog('open');
    };
    var closeDialog = function () {
        $('div#dlgConfirm').dialog('close');
    };
    var onConfirm = function (ev) {
        closeDialog();
        _dialogShown = true;
        $(this).click();
        _dialogShown = false;
    };
    var onCancel = function (ev) {
        _dialogShown = false;
        closeDialog();
    };
    var onClick = function (ev) {
        if (_dialogShown)
            return true;
        ensureDialog(this, ev.data.text);
        return false;
    };
    return {
        init: function () {
            $('.ui-hint-confirm').click(onClick);
        },
        setConfirm: function (target, text) {
            $(target).click(text, onClick);
        }
    };
} ();

$(document).ready(ConfirmDialogManager.init);

Next to looking for ui-hint-confirm elements on load it can also be manually invoked with setConfirm function.

The issue with above code is that nothing happens inside $(this).click() I have verified that it reaches that line through debugger (Chrome) and through alerting.

I also tried $(this).unbind('click', onClick) and $(this).unbind('click') with no difference. There are no errors being logged to console.

Any ideas? Thanks.

UPDATE: As requested, adding a html element samples this would work on:

Has to work on a regular link:

<a href="http://stackoverflow.com" class="ui-hint-confirm">Stack Overflow</a>

Has to work on a js only link:

<a href="#" class="ui-hint-confirm">JS Only</a>

Has to work on a submit button:

<input type="submit" value="Submit button" class="ui-hint-confirm" />

Has to work on a say link with some script already attached:

<a href="http://stackoverflow.com" id="theLink" class="ui-hint-confirm">Stack Overflow</a>
$('#theLink').click(function () { alert('Now going to Stack Overflow'); } );

In this last example the dialog should be shown before the alert message.

I has a similar thing working without an issue in ExtJS (now calles Sencha) I just can't get it to work in jQuery.

Thanks

0

精彩评论

暂无评论...
验证码 换一张
取 消