Question

当有人试图关闭＆＃34;编辑模式＆＃34;我试图捕获在页面上告诉他们保存更改。

触发编辑模式的是崩溃元素，第一个孩子是＆＃34;查看＆＃34;第二个孩子是＆＃34;编辑＆＃34;。我还有一个事件监听器附加到＆＃34;隐藏＆＃34;编辑子项的事件，因此当他们单击以折叠编辑模式时，他们将收到一条消息，询问他们是否要继续而不保存。问题是，我问他们，如果他们点击继续，一切都很好，但如果他们点击取消，我希望编辑模式停止折叠，并保持原样。

我已尝试使用e.preventDefault，stopImmediatePropagation，返回false，无效。

HTML：

<div class="accordion" id="my-accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <ul class="nav nav-tabs tab-items">
                <li id="firstTab" class="active"><a href="#first" data-toggle="tab" class="tab-item">First</a></li>
                <li id="secondTab"><a href="#second" data-toggle="tab" class="tab-item">Second</a></li>
            </ul>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
        </div>
    </div>
    <div class="accordion-group" id="edit" style="display:none;">
        <div class="accordion-heading center">
            <a id="edit-toggler" class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseTwo">
                <i class='icon-arrow-up'></i> Open Edit <i class='icon-arrow-up'></i>
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
        </div>
    </div>
</div>

JavaScript的：

$('#batch-edit').on('hide', function () { // THIS IS FOR THE BATCH EDIT BUTTON FUNCTIONALITY
    $('#collapseOne').collapse('toggle');
    $('#edit-toggler').html("<i class='icon-arrow-up'></i> Open Edit <i class='icon-arrow-up'></i>");
    isEdit = false;
    if(UserEditing){
        if(!confirm('Leave without saving?')) { 
            return false;
        }
    }

    // DO SOME STUFF
});

非常感谢任何帮助。

Answer 1

不幸的是，您无法绑定到本机隐藏/显示事件。这意味着我们需要自己触发这些自定义事件。

看看this SO answer.这是the link to the fiddle.

我做了类似于上面链接的答案中的解决方案，以便获得beforeHide，afterHide，beforeShow和afterShow事件。

下面的代码段可演示上述事件。

var $show = $('#show'),
$hide = $('#hide'),
$batchEdit = $('#batch-edit');

$show.hide();

$show.on('click', function()
{
$show.hide();
$hide.show();
$batchEdit.show();
});

$hide.on('click', function()
{
$show.show();
$hide.hide();
$batchEdit.hide();
});

$batchEdit.on('beforeHide', function ()
{
alert('triggered beforeHide');
$show.show();
$hide.hide();
})
.on('afterHide', function ()
{
alert('triggered afterHide');
})
.on('beforeShow', function ()
{
alert('triggered beforeShow');
$show.hide();
$hide.show();
})
.on('afterShow', function ()
{
alert('triggered afterShow');
});

(function($){

$.override ={'show': $.fn.show, 'hide': $.fn.hide};

$.each($.override,function(M,F){
    
    var m=M.replace( /^\w/, function(r){ return r.toUpperCase(); });
        
    $.fn[M] = function(speed, easing, callback) {
            
        var args=[speed||0,easing||'',callback||function(){}];
            
        if( $.isFunction(speed)){
            args[2]=speed;
            args[0]=0;
        }                      
        if( $.isFunction(easing)){
            args[2]=easing;
            args[1]='';
        }                    

        if(!this.selector){
            F.apply(this, arguments);
            return this;
        }
                
        return this.each(function () {
            var obj = $(this),
                oldCallback = args[args.length-1],
                newCallback = function () {
                    if ($.isFunction(oldCallback)){
                        oldCallback.apply(obj);
                    }
                    obj.trigger('after'+m);
                };
                
            obj.trigger('before'+m);
            args[args.length-1]=newCallback;
                
            //alert(args);
            F.apply(obj,args);

        });
    }
});
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="batch-edit">Batch Edit</div>
<input type='button' id="show" value='Show'>
<input type='button' id="hide" value = 'Hide'>

如何防止事件在jquery上完成？

1 个答案: