Question

The back end dev for our site has a div.errors for form handling, it is always present but empty unless there is an error in form submission. Its easy enough initially hide the div and then to check if it has length, if it does display it.

if ($(".errors").text().trim().length) {
    $(this).css('display', 'block');
}

The issue is this, on page load the div.errors is empty and hidden. when you submit the form, with an error the div.erros then has length, but the page is refreshed (loaded again) and the event does not fire again. Is .live a viable option?

Answer 1

The problem is that this stops referring to the element:

$(".errors").each(function () {
    if ($(this).text().trim().length) {
        $(this).css('display', 'block');
    }
});