如何将此javascript / jQuery转换为“非内联”功能？

Question

我拥有以下代码：

$(".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");
});

有人可以解释我如何将功能与动作分离吗？ 我对如何做到这一点感到困惑。

另外，“直播”的目的是什么？ 我听到有人建议“开”。 “在线”比“实时”好吗？它实际上是如何工作的？

Answer 1

只需将函数分解，然后传递函数名称：

close: closeFunction    

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

---

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

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

---

on确实优于live 。 两者都允许您将事件连接到动态添加的内容，但是前者效率更高，而后者则已弃用。 这是您的使用方式

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

或者，理想情况下，如果所有这些.close按钮都位于容器中，例如id foo的div，则可以更有效地执行

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

或对于jQuery 1.7之前的版本，您必须满足delegate

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

Answer 2

另外，“直播”的目的是什么？ 我听到有人建议“开”。 “在线”比“实时”好吗？它实际上是如何工作的？

由于不推荐使用jQuery 1.7 .live，因此： http : //api.jquery.com/live/

从jQuery 1.7开始 ，不推荐使用.live（）方法。 使用.on（）附加事件处理程序。 旧版jQuery的用户应该使用.delegate（）而不是.live（）。

有关新的.on()功能的更多信息： http : .on()