用于处理从 ajax 加载的多个脚本的结构
因此，和其他许多人一样，我在处理使用 ajax 加载的外部页面的脚本时遇到了问题。
我正在尝试设置一个页面，其顶部有一个“管理面板”。我希望能够导航到面板中的多个管理页面。不同的管理页面都包含内部
我在其中一个管理页面上做了一个小测试：
$('.left-col').click(function () {
alert();
});
在这里，每当我返回此页面时，它都会绑定另一个单击，因此每次单击该 div 时都会收到两个警报。我可以通过在 ajax.success 中运行 $('.left-col').unbind(); 轻松解决此问题。
然而，对于某些管理页面，有大量的 .click/.change/.live 等，我什至不确定它们是什么（即来自外部插件）。那么我可以以某种方式取消绑定/删除从每个 ajax 加载页面加载的所有脚本，而不必指定每个元素吗？我知道我可以使用带有取消绑定的选择器，但循环每个 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>
So as many others I have a problem dealing with scripts from external pages I load with ajax.
Im trying to set up a page with an "admin panel" on top of it. I want to be able to navigate to several admin pages within the panel. The different admin pages have both internal <script>and external js-files that they include. The scripts are loaded as they should but they seem to stack up or are not being managed in a good way.
I made a small test on one of the admin pages:
$('.left-col').click(function () {
alert();
});
Here, whenever I return to this page it will bind another click to it so I then get two alerts each time I click the div. I can solve this easily by running $('.left-col').unbind(); in my ajax.success.
However for some admin pages there are tons of .click/.change/.live etc and I'm not even sure what they are (i.e. from external plugins). So can I somehow unbind/remove all of the scripts loaded from each of my ajax-loaded page without having to specify each elements? I know I can use selectors with unbind but it doesnt seem very effective to loop over each div/img/input etc and unbind, and I'm not even sure if it will work.
This is how I load the admin pages:
<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>
Any help is appreciated, cheers!
The structure of the page:
<html>
<body>
<div class="panel__inner"> <!-- admin panel --> </div>
<!-- rest of project site -->
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您向我们展示元素的结构，也许会有帮助，但根据 Jquery 中“删除”的定义，它应该删除元素、其子元素、所有事件以及与其关联的任何数据。
div.panel__inner 是否位于您的 body 标记内？我看到您正在对 div 进行删除，但将数据添加到 $('body') 之前。你能去除身体内容物本身吗？
Maybe itd help if you show us the structure of the elements, but from the definition of "Remove" in Jquery, it should remove the element, its children, all events and any data associated to it.
Is div.panel__inner located inside your body tag? I see that you are doing a remove on the div, but prepending the data to $('body'). Can you remove the body contents itself?