Working with events in jquery 1.7

jQuery is a great javascript library that makes it easy to do many common tasks in a web application. One of the most frequent things you need to do is wire up events to your DOM elements. Prior to jQuery 1.7, you had a few different ways to accomplish this:

Option 1: Using the Bind method

<script type="text/javascript">
    $("a.add").bind("click", function(event) {
        alert("You clicked a link.");
    });
</script>

The above code will attach a click event handler to all anchor elements that have the class “add”. Similar to this method, jQuery provides some helper methods to attach these events in a more concise syntax. When attaching the '”click” event, you can use the click() method, etc.:

<script type="text/javascript">
    $("a.add").click(function(event) {
        alert("You clicked a link.");
    });
</script>

Option 2: Using Live/Delegate

The problem with using the bind method is that it does not add event handlers to dynamically added DOM elements. In order to do this you have to use the live/delegate syntax:

<script type="text/javascript">
    $("a.add").live("click", function(event) {
        alert("You clicked a link.");
    });

    $("#parent").delegate("a.add", "click", function(event) {
        alert("You clicked a link.");
    });
</script>

This attaches a click event handler to all anchor elements that have the class "add" similar to bind. The difference, however; is that any elements that are added to the DOM dynamically will also have the event handler attached. To demonstrate the problem you can visit the following pages (you may need to click the Run button to run the example):

‍Adding events with the bind method
‍Adding events with the live function.
‍Adding events with the delegate function.

‍You’ll notice that in the first example, when you click the initial paragraph it will add another paragraph directly after it, however; if you click one of the dynamically created paragraphs they will not add additional paragraphs. This is different from the second example where clicking on the dynamically generated paragraph will also cause a new paragraph to be created. I am using delegate in this example but it also works with the live method. The only difference between delegate and live is performance. The live method will search the entire DOM for elements where as the delegate method can search specific parts of the DOM using a selector.

Option 3: Using the on method in jQuery 1.7

So why is there a need for another way to wire up events? Simplicity. In jQuery 1.7 they have made it even easier to do. They have added a new method that will allow you to wire up events like bind and live/delegate all using a single method. Instead of having to remember the syntax of three different methods, you can now use the following:

<script type="text/javascript">
    $("#parent").on("click", "a.add", function(event) {
        alert("You clicked a link");
    });
</script>

This syntax is very similar to live and it works just like delegate, but it performs better than both of them. There is also a corresponding method called off that you can use to disable the events:

<script type="text/javascript">
    $("#parent").off("click", "a.add");
</script>

Adding events with the on method