javascript - jquery hover 不调用页面加载后获取类的元素

Question

我有一个基于 MVC 的网站的 ip 验证，它对 IPv4 字段进行“粗略”的前端验证。如果 ip get 发生变化，它将向该字段添加图像和错误消息。

但是，这似乎只适用于来自后端的数据。来自后端的不正确数据的字段因此在我的 Javascript 加载之前加载。有一个“悬停”事件。加载后获取validation-invalid类的字段没有悬停事件。

我该如何解决这个问题？我也尝试过 mouseenter、mouseleave。

$(".validation-invalid").hover(function () {
    $("#" + $(this)[0].id + "-error").toggle();
});

function validateIPv4(sender) {
    var ip = $(sender).val();
    var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

    if (ip.match(ipformat)) {
            $(sender).removeClass("validation-invalid").addClass("validation-valid");
    } else {
        $(sender).addClass("validation-invalid").removeClass("validation-valid");
        $('<span class="error-popover" id="' + $(sender)[0].id + '-error"><img class="error-callout" src="/Content/images/callout.png" alt="Help pointer">@GlobalizedResources.Device_Configuration_Page_IPv4_Error</span>').insertAfter(sender);
    }
}

Answer 1

所以基本上，当元素出现在 DOM 中时，事件就会被绑定(bind)，所以要将事件附加到动态生成的元素上，jQuery 提供了其他 API 来执行此操作。旧 jQuery 版本提供 .bind()新版本提供.on() API。

$(document).on("mouseover", ".validation-invalid", function () {
    $("#" + $(this)[0].id + "-error").toggle();
});

//Instead of "document" use the wrapper/container of ".validation-invalid"