【问题标题】:jquery prevent default seems stuck on and requires additional clickjquery prevent default 似乎卡住了,需要额外的点击
【发布时间】:2012-01-12 09:56:09
【问题描述】:

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

我遇到的问题是,当使用“是”按钮关闭对话框时,插件使用$(element).trigger( '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 );

【问题讨论】:

    标签: javascript jquery jquery-plugins javascript-framework


    【解决方案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 --> 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 ^
    }
    

    【讨论】:

    • onConfirm 默认在插件的默认值中返回 true。然后插件在其对话框中设置了调用它的按钮。如果你离开 onConfirm 它应该返回 true,然后插件中的这个位应该被调用:dialog.dialog( "close" ); if ( confirmed ) { $(element).trigger( elementEvent ); }
    • 我现在在插件中进行控制台日志记录 - 您可以看到所有事情都在发生,除非由于某种原因,通过触发器发生的对锚点的点击似乎被取消了。跨度>
    • 如果您想编辑您的答案,我已经重组了我的问题,以便更直接地解决我想要完成的任务。谢谢。
    • 我用答案更新了我的答案。 JSfiddle 按预期工作,并且点击“是”页面现在重定向。查看我的答案以获得更详细的解释。
    • 我真的希望浏览器会使用触发器调用来触发锚元素的默认行为,但这似乎是一个不错的解决方案。谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-30
    • 1970-01-01
    相关资源
    最近更新 更多