jQuery Custom Events Part 2

In part 1 we added custom events to a todo app. In this post we will be adding more complicated interactions.

Custom Events

    start marking a todo as done
    marking a todo is currently in progress
    we are done marking the todo done on the server
    happens after ajax returns with both success and error

By adding events during and after the ajax request to the server, we can provide interactions to give the user feedback during the process.

Once a user triggers the done event, we will remove the checkbox and add a spinner while a request is in progress. Then we can trigger a success event that checks the checkbox, removes the spinner and strikes the item.

Triggering states

$('.todo_list').delegate('li', 'done.mark.todos.myapp', function(e) {
    //send todo item to server for marking...
    var $this = $(this);
        url: "",
        method: 'POST',
        context: $this,
        beforeSend: function(e) {
        success: function(resp) {
        complete: function(resp) {
            // happens after success or error.

Listen for states


$('.todo_list').delegate('li', 'inprogress.done.mark.todos.myapp', function(e) {
        var $checkbox = $(this).find(":checkbox");
        $checkbox.before($("<img />", {
            src: "images/ajax-loader.gif",
            class: "loader"


$('.todo_list').delegate('li', 'success.done.mark.todos.myapp', function(e) {
    var $checkbox = $(this).find(":checkbox")
    $checkbox.attr('checked', true);


$('.todo_list').delegate('li', 'complete.done.mark.todos.myapp', function(e) {
        var $checkbox = $(this).find(":checkbox");

Try it out and see what you think.