关于jQuery绑定JS事件的一些心得

jQuery框架由于使用方便，语言优雅，在ROR项目中经常被使用。比较常用的是给特定的元素（比如一个button）绑定一些JS时间，拿最简单的click事件来说，给 class='btn-alert'的一个button绑定一个alert事件：

$(".btn-alert").click ->
  alert "hellow"

可见，实现上述功能，代码是非常简单且直观的。
现在问题来了，如果有这么一个需求，写一个model的index页面，该模型的增删改查都在这个页面实现，全程要求不刷新页面。
仔细分析一下这个需求，我们会发现，删除不刷新页面比较容易实现，向后台用$.ajax请求，期待返回一个script类型的数据，将已经被删除的这一行tr进行hide()或者slideUp()即可（假设index页的数据是通过.each do方法，每条数据输出一行tr），但是添加动作就有点问题了。
问题不是出在后台的action上，也不是前台append一行tr数据，而且通过append()方法新增的数据，同样需要那个有alert功能的按钮，并且这些新增的按钮，在不刷新页面的情况下，还必须起作用（不是放出来装样子的）。
我们可以通过html代码，来写出这个按钮，结构和其他按钮保持一致，但发现点了这些按钮，并没有alert事件出现，原因主要是因为jQuery绑定JS事件的机制：当页面加载完成后，根据jQuery代码的绑定事件，会自动给这些button绑定上这些事件，当用ajax提交新增了一条数据后，该button虽然有相同的class（btn-alert），看似能触发.btn-alert该具备的 click事件，但由于页面没有刷新，这个按钮其实没有被绑定这个click事件，因此才不起作用。
通过查询资料，发现这个问题是比较容易解决的，解决的方法就是调用bind()
当我们用jquery代码append一个button之后，就调用bind()方法给这个button事实绑定上该有的时间：

$(".btn-alert").first().bind 'click', ->
  message_id = $(this).data("message-id")
  return

如此之后，新增的那个button也同样具备alert的click事件了，解决了这个问题，全称不刷新页面的需求也随之迎刃而解了。