Question

我正在使用jquery可调整大小的事件以及jquery上下文菜单。但是，两者似乎互相干扰，因此可调整大小的事件不会结束。我尝试了在jquery resizable event does not end上发布的解决方案，但是在调整大小一次之后，这些元素变得不可见了。看看这里：http://autopulate.azurewebsites.net/try.html

相应的功能如下所示：

function createContextMenu(){

$(".elmnt").contextMenu({
                    menu: 'elmntMenu'
                },
                    function(action, el, pos) {
                    if(action=='edit'){
                        $(el).attr("oldvalue",$(el).val());
                        $(el).prop('contenteditable',true);
                        $(el).mouseleave(function() { 
                            if($(el).val()!=$(el).attr('oldvalue')){
                                var elmnt_class = $(el).attr('class').split(' ')[2];
                                $('.'+elmnt_class).addClass('output');                          
                            }
                            $(el).attr('contenteditable',false);
                        });
                    }

                });
                $(".list").contextMenu({
                    menu: 'listMenu'
                },
                    function(action, el, pos) {

                        if(action=='flatten'){                          
                            var tmp=el.attr('id');
                            var t=tmp.substring(tmp.length-1);                          
                            $('div[id^="tuple'+t+'_"]:not(:first)').each(function( index ){                             
                                $(this).remove();
                            });                         
                            $('.elmnt1').each(function( index ){
                                $(this).empty();
                            });
                        }

                        else if(action=='map'){                         
                            var tmp=el.attr('id');
                            var t=tmp.substring(tmp.length-1);                          
                            $('div[id^="tuple'+t+'_"]:not(:first)').each(function( index ){                             
                                $(this).remove();
                            });                         
                            $('.elmnt1').each(function( index ){
                                $(this).empty();
                            });
                        }
                    }
                );
                $(".tuple").contextMenu({
                    menu: 'tupleMenu'
                },
                    function(action, el, pos) {
                    if(action=='concatenate'){
                        var newval="";
                        var tmp=el.attr('id');
                        var t=tmp.substring(5);                     
                        $('div[id^="elmnt'+t+'_"]').each(function( index ){
                            newval+=$(this).text();                             
                            if($(this).attr('id')!='elmnt'+t+'_1')$(this).remove();
                        });                         
                        $('.elmnt1').each(function( index ){
                            $(this).text(newval);
                        });
                    }
                }); 


}

function destroyContextMenu(){

$(".list").destroyContextMenu();
$(".tuple").destroyContextMenu();
$(".elmnt").destroyContextMenu(); 


}





$(document).ready(function () {
createContextMenu();
$('.elmnt1_1').resizable({
start:function () {
   destroyContextMenu();
   console.log('resize started');
},
stop:function () {
  createContextMenu();
  console.log('resize stopped');
},
resize:function () {
  console.log("resize happened");
},
handles: 'e',
alsoResize: '.elmnt1_1',
});


});

Answer 1

在遇到同样的问题后发现了这个问题。为了记录，我的解决方法是添加一个包装div，以便外部div可调整大小，内部div具有上下文菜单。

Jquery resizabe事件没有结束

1 个答案: