javascript - jquery hover not called on elements that get the class after page has loaded -
i have ip validation mvc based website "crude" frontend validation of ipv4 field. if ip get's changed add image , error message field.
however, seems work data comes back-end. fields incorrect data coming backend , loaded before javascript loads. have "hover" event. fields validation-invalid class after loading not have hover event.
how go fixing this? i've tried on mouseenter, mouseleave aswell.
$(".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); } }
so events bound when elements present in dom, attach events dynamically generated elements jquery provides other apis this. old jquery version provides .bind() , new version provides .on() apis.
$(document).on("mouseover", ".validation-invalid", function () { $("#" + $(this)[0].id + "-error").toggle(); }); //instead of "document" use wrapper/container of ".validation-invalid"
Comments
Post a Comment