How can I convert this javascript / jQuery into a "not inline" function?

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?

All functions in JavaScript as just values. Take function callback () {};: now, in the applicable scope, callback merely evaluates to said function-object. — user166390
– user166390, Commented Jan 12, 2012 at 6:55
as far as second part of the question is concerned live is deprecated on is included in the version 1.7+ if you dont have the latest version of jQuery then try using delegate, the purpose is to attach the event handlers to the dynamically added elements to the DOM... — Rafay
– Rafay, Commented Jan 12, 2012 at 6:56

Adam Rackis · Accepted Answer · 2012-01-12 06:59:59Z

4

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);

edited Jan 12, 2012 at 6:59

answered Jan 12, 2012 at 6:54

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BartekR · Accepted Answer · 2012-01-12 06:58:45Z

3

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

Since jQuery 1.7 .live is deprecated: http://api.jquery.com/live/

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

More about new .on() feature: http://blog.jquery.com/2011/11/03/jquery-1-7-released/

answered Jan 12, 2012 at 6:58

BartekR

3,9973 gold badges28 silver badges33 bronze badges

Collectives™ on Stack Overflow

How can I convert this javascript / jQuery into a "not inline" function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related