我有一个用jQuery ajax加载的部分视图。它枚举了Model中的属性并呈现需要绑定JavaScript事件的HTML元素。
这是我现在简化后的razor代码:
foreach(MyObject item Model.MyObjectList)
{
string containerId = "Container" + item.Id;
string onMouseOut = "DoSomething('"+containerId+"',@Model.Id)";
<div id="@containerId" onmouseout="@onMouseOut">
//Other code here
</div>
}
这种方法可以工作,但是据说在JQuery中绑定事件更好,如果我这样做,你还可以利用JQuery事件,比如“onmouseleave”。
因此,另一种方法是在每个枚举内部放置一个脚本块,设置事件,就像这样
<script type='text/javascript'>
$('#@containerId').mouseout(function(){
DoSomething('@containerId',@Model.Id)
});
</script>
然而,这会导致大量的脚本块被渲染出来。在局部视图中设置事件是否有其他更好的解决方案?
containerId
添加事件处理程序,而是在这些“容器div”上设置一个类,并使用on
绑定它们。这样,您始终只需要一个处理程序,无论加载多少个容器,代码都可以驻留在主页面上。 - Andrei Vid
属性,然后使用$('.container').mouseout(function() { ...
如果需要存储和检索模型值(例如ID
),请使用data-
属性进行存储。 - user3559349