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 );
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.
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.