javascript - 为部分 View 设置 JavaScript 事件处理程序的最佳实践

Question

我有一个通过 JQuery ajax 加载的局部 View 。它通过模型中的属性进行枚举，并呈现需要绑定(bind) 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 中绑定(bind)事件会更好，如果我这样做，您也可以利用 JQuery 事件，例如“onmouseleave”。

所以我可以做的另一种方法是在每个枚举中放置一个脚本 block ，这样设置事件

<script type='text/javascript'>
  $('#@containerId').mouseout(function(){
   DoSomething('@containerId',@Model.Id)
  });
</script>

然而，这会导致渲染大量脚本 block 。

在部分 View 中设置事件是否有其他更好的解决方案？

Answer 1

使用 .on 方法将事件绑定(bind)到并不总是在 DOM 中的事物。

$('#foo').on('click', function() {
    // do stuff
});

然后，您无需在部分中插入脚本标签。有一个类似于 .live() 的方法，但此后已在 v1.7 中弃用并从 v1.9 中删除。

jQuery API : .on();