Question

I hvae the following code:

$(".openDialog").live("click", function (e) {
    e.preventDefault();

    $("<div></div>")
    .addClass("dialog")
    .attr("id", $(this).attr("data-dialog-id"))
    .appendTo("body")
    .dialog({
        title: $(this).attr("data-dialog-title"),
        close: function () { $(this).remove() },
        modal: true
    })
    .load(this.href);
});
$(".close").live("click", function (e) {
    e.preventDefault();
    $(this).closest(".dialog").dialog("close");
});

Can someone explain how I can decouple the functions form the actions? I am a bit confused with how to do this.

Also what is the purpose of “live” ? I heard before someone suggesting “on”. Is “on” better than “live” and how does it actually work?

Answer 1

Just break the functions out, then pass the function name:

close: closeFunction    

function closeFunction() { 
   $(this).remove() 
}

---

$(".close").live("click", closeClick);

function closeClick(e) {
    e.preventDefault();
    $(this).closest(".dialog").dialog("close");
}

---

on is indeed better than live. Both allow you to wire up events to dynamically added content, but the former is more efficient, and the latter is deprecated, . Here’s how you’d use it

$(document).on("click", ".close", closeClick);

or, ideally, if all these .close buttons were to be in a container, say, a div with id foo, you could more efficiently do

$("#foo").on("click", ".close", closeClick);

or for jQuery pre 1.7 you’d have to settle for delegate

$("#foo").delegate(".close", "click", closeClick);