jQuery - 从 live() 更改为 on()

Question

我有以下代码，想从使用 live（） 方法更改为使用 on（） 方法：

$('.commenttext').live('keydown', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});

这是关于评论一个帖子 - 也是一个使用 on（） 方法动态创建的帖子。如果我只是像这样将"live"一词更改为"on"

$('.commenttext').on('keydown', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});

然后，它仅适用于不是动态创建的项目。

更新 1

我将代码更改为以下内容：

$('.commentsDiv').on('keydown', '.commenttext', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});

与 commentsDiv 是 commenttext 的父元素，但它仍然不适用于动态创建的元素。例如，以下函数动态创建 commentsDiv：

$('#postDiv').on('keydown', '#posttext', function(e) {
    if (e.which==13 && !e.shiftKey) {
        post($(this));
        return false;
    }
});

有谁知道如何正确调整？

谢谢:)

Answer 1

您需要

将回调附加到 .commenttext 的静态父级 静态意味着页面加载时存在。

例：

$('body').on('keydown', '.commenttext', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});

或：

$('{staticParentElement}').on('keydown', '.commenttext', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});

Answer 2

live 形式实际上是使用 document 的委托，因此新格式将是：

$(document).on('keydown', '.commenttext', function...);

通常，最好使用选择器的更近一致的父级（在本例中为 .commenttext），该父级不会随内容而更改，但在大多数情况下document应该有效。

Answer 3

$('parentElement').on('keydown', '.commenttext', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});

将"parentElement"替换为 .commenttext 的父元素。

Answer 4

您可以使用最近的静态父元素作为事件持有者。但是，您也可以使用body：

$('body').on('keydown', '.commenttext', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});