jQuery懸停未調用頁面加載后獲取類的元素

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中時事件是綁定的，因此將事件附加到動態生成的元素上，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"