我在项目的部分 View 中放入了一些jquery选项卡。我通过Visual Studio的“解决方案资源管理器”注意到，在调试期间，每当我单击新选项卡时，都会生成一个新的动态JScript - script block。
即使将$('#mytabs .ui-tabs-hide').children().remove();和$(".ui-tabs-hide").empty();放在选项卡的show事件中，也会发生这种情况。
脚本块包含我放置在由选项卡调用的局部 View 中的javascript，因此，每当我单击以前单击的选项卡时，都会出现一个新的JScript块:很明显，这会导致稳定性问题或内存泄漏...例如，我已经注意到在加载两次标签后，某些计时器和绑定(bind)无法正常工作。
我不知道问题是否是由调用包含脚本的局部 View 的方式引起的。请注意我如何设置 Controller Action (示例中的索引)。
这是我的环境:jquery 1.6.4-jquery-ui 1.8.16-IE 8.0.7601
我无法使用其他浏览器成功进行调试，因为Visual Studio似乎未附加其进程并且不显示动态数据。
CONTROLLER
这是一个由选项卡调用的操作示例
public ActionResult Index()
{
if (Request.IsAjaxRequest())
return PartialView("_Index");
return View();
}
这是我的一些观点和脚本:
_Layout.cshtml
....
<div id="body">
@Html.Partial("_TabsMenu");
</div>
....
_TabsMenu.cshtml(包含选项卡菜单的部分 View )
<div id="menutabs" class="content-wrapper">
<ul >
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Test", "Index", "Test")</li>
...
</ul>
</div>
<script type="text/javascript">
$(function () {
$('#menutabs').tabs({
cache: false,
show: function (event, ui) {
$('#menutabs .ui-tabs-hide').children().remove(); // the content is removed , but the script is still in memory
$(".ui-tabs-hide").empty(); // the content is removed, but the script is still in memory
},
select: function (event, ui) {
$(window).unbind();
}
});
});
(我什至试图将脚本放入div id中，pheraps很愚蠢，但是我想看看DOM中的脚本是否已删除...但是什么也没有)
Index.cshtml
@{Html.RenderPartial("_Index");}
_Index.cshtml(包含问题的重复jscript对象的局部 View )
<table id="list4"></table>
<jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
更新了
JScript-脚本块1..N //这是我在调试过程中在每个JScript-脚本块中看到的...我是testint jqgrid。这是一个demo from Trirand's site。
<jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
最佳答案
浏览器解析的脚本不在DOM中，并且您不能“删除”它-变量仍然定义，事件仍然绑定(bind)，方法仍然存在。如果将javascript放入重复加载的局部 View 中，则将重复获得该javascript。
您需要做的就是编写您的JavaScript，以对此更具弹性。如果将事件绑定(bind)到动态区域之外的元素，则不要。您将多次绑定(bind)它们。将该代码移到某个位置，它将仅被加载一次。尝试使动态区域中的javascript保持隔离状态，以便它仅处理也在动态区域中的元素。
您还可以通过简单的if检查，使用范围更大的jquery选择器等来防止出现多个定义。
如果没有重复的内容的详细信息，我将无能为力。
关于jquery - "JScript - script block"和内存泄漏-如何正确释放资源？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9365031/