jQuery的防止默认似乎卡住了，需要额外的点击 [英] jquery prevent default seems stuck on and requires additional click

问题描述

我正在编写一个jquery插件，以在单击链接之前单击链接以提供确认对话框时显示一个jquery ui对话框.

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.

我遇到的问题是，使用是"按钮关闭对话框时，插件使用$(element).trigger( 'click' );在原始锚点元素上触发click事件.

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.

插件的使用方式如下$('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 );

推荐答案

您必须将包含要执行的操作的函数传递给插件.
在javascript底部为插件设置默认参数时，添加此行.

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?' );
        }
    });
});

更新
查看此 JSfiddle ->

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 ^
}

这篇关于jQuery的防止默认似乎卡住了，需要额外的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！