Question

与其他许多人一样，我在使用ajax加载来自外部页面的脚本时遇到问题。

我试图在其上设置一个带有“管理面板”的页面。我希望能够导航到面板中的多个管理页面。不同的管理页面包含内部<script>和外部js文件。脚本按原样加载，但它们似乎堆叠或者没有以良好的方式进行管理。

我在其中一个管理页面上做了一个小测试：

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

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

然而，对于某些管理页面，有大量的.click / .change / .live等，我甚至不确定它们是什么（即来自外部插件）。那么我可以以某种方式取消绑定/删除从我的每个加载ajax的页面加载的所有脚本而不必指定每个元素吗？我知道我可以使用unbind的选择器，但是在每个div / img / input等上循环并取消绑定似乎并不是很有效，我甚至不确定它是否会起作用。

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

<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>

Answer 1

如果向我们展示元素的结构，也许它会有所帮助，但是从Jquery中的“Remove”的定义来看，它应该删除元素，它的子元素，所有事件以及与之关联的任何数据。

div.panel__inner是否位于您的身体标签内？我看到你正在删除div，但是将数据添加到$（'body'）。你能自己删除身体内容吗？

处理从ajax加载的几个脚本的结构

1 个答案: