Question

我正在使用.on()和jQuery来显示div，并使用.load()来加载来自我服务器上的网页的特定div。

当我点击div时，如何关闭这个div，并在DOM中将其销毁，以免多次加载？

这是一个页脚元素，可以在单击页脚中的链接时显示/隐藏。

我用.off（）：

尝试了

           if ($(window).width() > 500) {
            //
            $('.marketSelector',this.$element).on('click', function(e){
                e.preventDefault();
                var testMarketSelector = $('.testMarketSelector');
                testMarketSelector.css({
                    'display': 'block'
                });
                testMarketSelector.load( "/frontend/MarketSelector.html .MarketSelector" );
                testMarketSelector.off("click", function(){
                    testMarketSelector.css({
                        'display': 'none'
                    });
                });
            });
        }

我也试过.one（）：

        if ($(window).width() > 500) {
            //
            $('.marketSelector',this.$element).one('click', function(e){
                e.preventDefault();
                var testMarketSelector = $('.testMarketSelector');
                testMarketSelector.css({
                    'display': 'block'
                });
                testMarketSelector.load( "/frontend/MarketSelector.html .MarketSelector" );
            });
        }

Answer 1

将您的活动更改为：

$('.marketSelector', this.$element).one('click', function (e) { ... });

要销毁div，只要在元素外部单击，就可以使用插件，例如外部单击或向主体添加新事件。

打开对话框时附加此事件侦听器：

var $marketingDialog = this.$element;
$("body").on("click.outer",function(event){ 
 // User did not clicked inside of the dialog
 if(!$marketingDialog.parents($(event.target)).length ){
    $marketingDialog.fadeOut();
    $marketingDialog.remove();
    $("body").off("click.outer"); 
  }
});

Answer 2

testMarketSelector.load( ...); API有成功处理程序;在testMarketSelector.off("click", ...)的成功处理程序中调用load()。同样是IIRC，如果load() API调用本身加载jquery作为加载页面的一部分，则存在问题（看起来在DIV中加载的页面中的jquery会覆盖父页面jquery）。

销毁ajax加载的页面并隐藏div

2 个答案: