用于处理从ajax加载的多个脚本的结构



因此,与许多其他人一样,我在处理使用ajax加载的外部页面的脚本时遇到了问题。

我试图建立一个页面与"管理面板"在它的顶部。我希望能够导航到面板内的几个管理页面。不同的管理页面包含内部的<script>和外部的js文件。脚本被加载,因为他们应该,但他们似乎堆积或没有被管理在一个很好的方式。

我在一个管理页面上做了一个小测试:

$('.left-col').click(function () {
    alert();
});

在这里,每当我返回到这个页面,它会绑定另一个点击到它,所以我每次点击div都会得到两个警报。我可以通过在我的ajax.success中运行$('.left-col').unbind();来轻松解决这个问题。

然而,对于一些管理页面,有大量的。click/。change/。等等,我甚至不确定他们是什么(即来自外部插件)。那么,我能否在不指定每个元素的情况下,以某种方式解除绑定/删除从每个ajax加载的页面加载的所有脚本?我知道我可以使用选择器与unbind,但它似乎不是很有效的循环在每个div/img/input等和unbind,我甚至不确定它是否会工作。

这是我加载管理页面的方式:

<script type="text/javascript">
$(document).ready(function() {  
function reloadAdminPanel(url) {
    if(typeof(url)  === "undefined") {
        var url = '/admin/panel/dashboard/';
    }
    $.ajax({
        'success': function (data, textStatus) { 
            var jData = $(data);
            // override links in admin to run reloadAdminPanel()
            jData.find('a').each(function() {
                var newUrl = $(this).attr('href');
                $(this).click(function(e) {
                    reloadAdminPanel(newUrl);
                    return false; 
                });
            });

            $('div.panel__inner').remove();
            $('body').prepend(jData);
            delete jData;
        },
        'url':  url
    });
}
reloadAdminPanel();
});
</script>

任何帮助是感激的,干杯!

页面结构:

<html>
<body>
<div class="panel__inner"> <!-- admin panel --> </div>
    <!-- rest of project site -->
</body>
</html>

如果您向我们展示元素的结构可能会有所帮助,但从Jquery中"Remove"的定义来看,它应该删除元素,其子元素,所有事件以及与之相关的任何数据。

div.panel__inner是否位于您的body标签内?我看到您正在对div进行删除,但将数据添加到$('body')。你能把尸体里的东西移走吗?

相关内容

  • 没有找到相关文章

最新更新