Javascript 在页面加载后获取类的元素上未调用jquery hover

我有一个基于MVC的网站的ip验证，该网站对IPv4字段进行“原始”前端验证。如果ip get被更改，它将向该字段添加一个映像和一条错误消息

然而，这似乎只适用于来自后端的数据。 来自后端且因此在加载Javascript之前加载的数据不正确的字段。有一个“悬停”事件。加载后获取验证无效类的字段没有悬停事件

我该如何着手解决这个问题？我试过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);
    }
}

$（“.validation无效”）.hover（函数（）{
$（“#”+$（this）[0].id+“-error”）.toggle（）；
});
函数validateIPv4（发送方）{
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-4][0-9]|[01]|[0-9]。\（25[0-5]|[0-5]|[0-4][0-9]。）；
if（ip.match（ipformat））{
$（发件人）.removeClass（“验证无效”）.addClass（“验证有效”）；
}否则{
$（发件人）.addClass（“验证无效”）.removeClass（“验证有效”）；
$（“@GlobalizedResources.Device\u Configuration\u Page\u IPv4\u Error”）.insertAfter（发送方）；
}
}

因此，基本上，当元素出现在DOM中时，事件是绑定的，因此为了将事件附加到动态生成的元素，jQuery提供了其他API来实现这一点。旧jQuery版本提供API，新版本提供API

---

将

hover

更改为

on（'hover'，

您必须在jqueryoh中使用一种称为事件委派的方法。对..

mouseover

需要添加..在复制粘贴OP的代码时几乎忘记了，

mouseout

以及：

$（文档）。on（'mouseover mouseout'，“.validation invalid”，函数（）{

所以Karl Andre您的解决方案是可行的，但我每次都必须单击才能成功。@请尝试

$（文档）。在（“mouseenter mouseleave”，“.validation invalid”，函数（）{

是的，我评论了

mouseout mouseover

，但我错了。它实际上是

mouseenter mouseleave

。由于OP use

.toggle（）

在函数中。这意味着当鼠标离开元素时，错误应该消失，如果只离开

mouseenter

，则不会发生错误。只有使用

mouseenter

才能在鼠标进入元素时进行错误切换。

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

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