类选择器在追加后不起作用 (JQuery）

Class selector does not work after append (JQuery)

本文关键字：JQuery 不起作用 选择器 追加      更新时间：2023-09-26
    $(".quantidade").on("change blur", function() {
        if ($(this).val().length) {
            validateField("quantidade");
        } else {
            invalidateField("quantidade");
            showGeneralMessage("É necessário preencher a quantidade!", "danger");
        }
    });

它工作得很好，直到添加一个带有附加的新项目：

$(".btn-add-produto").click(function() {
    ...
    $("#listaProdutosPedido").append(content);
    ...
});

此"内容"包括具有相同类的输入。添加此 html 片段后，类选择器不适用于它。我想这是因为当文档准备就绪时，该段 HTML 不存在。如何"重新加载"javascript/文档，以便选择器即使在将来的引用中也能工作？我尝试使用 setInterval(( 进行检查，但它也不起作用......

您需要使用委托.on()事件语法。在事件委派中，将事件附加到父元素。在内部，jQuery依赖于事件能力来冒泡DOM树。当找到指定类型的事件，其 e.target 属性与委托选择器匹配时，将触发您的事件。

若要适应此更改，请按如下所示修改代码：

$(document).on("change blur", ".quantidade", function() {
    if ($(this).val().length) {
        validateField("quantidade");
    } else {
        invalidateField("quantidade");
        showGeneralMessage("É necessário preencher a quantidade!", "danger");
    }
});

请注意，在如此高的级别进行委派是极其低效的。 应将包含新追加内容的最近父元素的document更改为。在这种情况下，我用它来演示该过程是如何发生的，因为您的问题中没有指定 HTML DOM 树输出。在系统中实现此功能时，我鼓励您相应地更新document选择器。

相关文章：