Use jQuery#on for delegation of events

jQuery#on lets you capture events on a parent element for a specific
selector, instead of binding a different event for each element. This is
better for two reasons:

  1) on large applications, you conserve memory (and prevent leaks) by
not having a ton of events

  2) when you add elements to a list dynamically, you don't have to
refresh the event listeners

Author: xionon

app/assets/javascripts/users.js.coffee

@@ -1,17 +1,13 @@
 $(document).ready ->
-  $('.close').click ->
+  $('.close').on "click", ->
     $('#showUser').fadeOut()
 
   $('form#new_user').on "ajax:success", (data, status, xhr) ->
-    $('#listContainer').load('userlist/', -> bindListBehavior())
+    $('#listContainer').load('userlist/')
 
-  bindListBehavior = ->
-    $('span.showUser').click ->
-      userid = $(this).attr('userid')
-      $('#userDiv').load('users/' + userid, -> $('#showUser').show() )
+  $('#listContainer').on 'click', 'span.showUser', ->
+    userid = $(this).attr('userid')
+    $('#userDiv').load('users/' + userid, -> $('#showUser').show() )
 
-    $('.delete_user').bind 'ajax:success', ->
-      $(this).closest('tr').fadeOut()
-
-  # only major change in coffeescript translation: bindListBehavior must be called after it is defined
-  bindListBehavior()
+  $('#listContainer').on 'ajax:success', '.delete_user', ->
+    $(this).closest('tr').fadeOut()