为局部视图设置JavaScript事件处理程序的最佳实践

Question

我有一个用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>

然而，这会导致大量的脚本块被渲染出来。在局部视图中设置事件是否有其他更好的解决方案？

- user2945722

---

考虑使用jQuery代理。不要为每个containerId添加事件处理程序，而是在这些“容器div”上设置一个类，并使用on绑定它们。这样，您始终只需要一个处理程序，无论加载多少个容器，代码都可以驻留在主页面上。 - Andrei V

你应该只渲染一个脚本块。使用类名而不是 id 属性，然后使用 $('.container').mouseout(function() { ... 如果需要存储和检索模型值（例如 ID），请使用 data- 属性进行存储。 - user3559349

Answer 1

使用.on方法将事件绑定到不总是在DOM中的元素。

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

您可以在部分视图中省略插入脚本标签的步骤。之前有一个类似的 .live() 方法，但它已经自 jQuery v1.7 起被弃用，并在 v1.9 中删除。

jQuery API : .on();

- Joshua Kelly