我正在编写一个jquery插件来显示一个jquery ui对话框,点击链接以提供确认对话框,然后才能跟踪链接。
我遇到的问题是,当使用“是”按钮关闭对话框时,插件使用$(element).trigger( 'click' );
来触发原始锚元素上的click事件。
这不会导致浏览器关注该链接,但是在对话框关闭之后用鼠标再次单击可以正常工作。
该插件的使用方式与$('a').submitConfirm();
这是插件
;(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 );
答案 0 :(得分:1)
您必须将包含您要执行的操作的函数传递给插件 当您在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?' );
}
});
});
<强>更新强>
看看这个JSfiddle - &gt; http://jsfiddle.net/kmTtQ/6/
我改变了下面的行。基本上,我们要向元素添加.click
事件,然后点击.trigger('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 ^
}