jquery prevent default seems stuck on and requires additional click

Question

I'm writing a jquery plugin to display a jquery ui dialog when links are clicked to provide a confirmation dialog before the link is followed.

The problem i'm having is that when closing the dialog using the "Yes" button, the plugin uses $(element).trigger( 'click' ); to fire the click event on the original anchor element.

This does not cause the browser to follow the link, however a second click with my mouse after the dialog closes does work.

The plugin is used like this $('a').submitConfirm();

Here is the plugin

;(function ( $, window, document, undefined )
{
    var pluginName = "submitConfirm";

    var Plugin = function( element )
    {
        var confirmed = false;

        var dialog = $( '<div style="display:none;">' )
        .html( 'Visit this link?' )
        .dialog(
        {
            modal: true,
            title: 'Visit Link?',
            autoOpen: false,
            buttons :
            [
               {
                    text: 'Yes',
                    click: function( event )
                    {
                        confirmed = true;
                        dialog.dialog( "close" );
                        $(element).trigger( 'click' );
                    }
                },
                {
                    text: 'No',
                    click: function( event )
                    {
                        confirmed = false;
                        dialog.dialog( "close" );
                    }
                }
            ]
        });

        $(element).bind( 'click',
        function( event )
        {
            if ( ! confirmed )
            {
                dialog.dialog( "open" );
                event.preventDefault();
            }
        });
    };

    // Init the plugin
    $.fn[pluginName] = function( options )
    {
        return this.each(function ()
        {
            // Prevent re-instantiation
            if ( !$.data(this, 'plugin_' + pluginName) )
            {
                $.data(this, 'plugin_' + pluginName,
                new Plugin( this, options ));
            }
        });
    };
})( jQuery );

Anil · Accepted Answer · 2011-12-05T11:41:56.857

1

You have to pass a function containing what you want to do to the plugin.
Add this line when you are setting the default parameters for the plugin at the bottom of your javascript.

$(function()
{
    $('a').submitConfirm(
    {
        html: 'Are you sure?',
        onConfirm: function(event){ // Do what you want in this function.
            alert('Confirmed.. Now what?.. Redirect?.. ?? ');
            // window.location = $(this).attr('href'); // redirect
                },
        beforeShow: function( dialog )
        {
            dialog.html( 'visit google?' );
        }
    });
});

Update
Check out this JSfiddle --> http://jsfiddle.net/kmTtQ/6/
I changed the lines below. Basically, we want to add a .click event to the element, then .trigger('click') that click.

if ( confirmed ){
    console.log( element, elementEvent, event.isDefaultPrevented );
    // .on() = jQuery 1.7+, for < 1.7 use .bind or .live. Aliases of .on() as of 1.7
    $(element).on('click', function(){ // bind our element with the click
        event.view.window.location = element.href; // on click redirect
    });

    $(element).trigger( 'click' ); // We want to trigger the ^ click event ^
}

edited Dec 05 '11 at 11:41

answered Dec 04 '11 at 00:43

Anil

21,730
9
73
100

onConfirm is defaulted to returning true in the plugin's defaults. then the plugin, on its dialog has the buttons set to call that. if you leave off onConfirm it should return true, and then this bit in the plugin should get called: `dialog.dialog( "close" ); if ( confirmed ) { $(element).trigger( elementEvent ); }` – Tim G Dec 04 '11 at 00:49
I have console logging going in the plugin right now - you can see that everything is happening that should except for some reason the click on the anchor that's happening via the trigger seems to be getting canceled. – Tim G Dec 04 '11 at 00:51
In case you'd like to edit your answer I've restructured my question to be more direct toward what I'm trying to accomplish. Thanks. – Tim G Dec 04 '11 at 22:33
I updated my answer with the answer. The JSfiddle works as expected and onclick of "yes" the page now redirects. Check my answer for a more detailed explanation. – Anil Dec 05 '11 at 11:43
I was really hoping the browser would use the trigger call to trigger default behavior on the anchor element, but this appears to be a decent solution. thanks. – Tim G Dec 05 '11 at 15:45
.trigger will only trigger an event in javascript that is binded to the element. The browser doesnt use the trigger call to trigger default behaviour. This has to be done in javascript with an event and trigger. – Anil Dec 05 '11 at 17:55

jquery prevent default seems stuck on and requires additional click

1 Answers1

Linked