Using jquery inputmask with flask-CodePudding

I'm upgrading my math department's internal webpages to use Python3 and the Flask framework. The page I'm currently working on uses input masking to enforce a particular date format (among other things):

With the "Date Given" box selected, the input masking appears

The basic layout of the code that handles this page is

def manage_exams():
    kwargs['content']=Markup(gl.get_html_to_list_all_exams())
    
    if form_name in ["add","edit"]:
        html=gl.get_html_for_exam_add_edit_pages(form_name, exam_id, course_id)
        return html

    return render_template("manage_exams.html", **kwargs)

The relevant part of the accompanying javascript is

$(document).ready(function() {
    $(".date").mask("99-99-9999");
    $("#weight").mask("9.9?9?9");
});

function manage_exam_AJAX(form_name, exam_id, course_id){
    var data = {form_name: form_name,
                exam_id: exam_id,
                course_id: course_id};
    $.ajax({
        type: 'post',
        dataType: 'html',
        url: 'manage_exams',
        async: false,
        data: data,
        success: function (response, status, xml) {
            if(response.error)
            {
                alert(response.data);
            }
            else
            {
                $("#main_content").html(response);
            }
        },
    error: function(response, status, xml) {
        alert(JSON.stringify(response));
        }
    });
}

What I've found that is if I re-render the template, the input masking works as intended:

def manage_exams():
    kwargs['content']=Markup(gl.get_html_to_list_all_exams())
    
    if form_name in ["add","edit"]:
        kwargs['content']=Markup(gl.get_html_for_exam_add_edit_pages(form_name, exam_id, course_id))
    return render_template("manage_exams.html", **kwargs)

With this second approach, I'll have to tweak/eliminate my javascript because now the page loads inside of itself, but what should I be doing instead? Is there anyway I can just return the html variable and use jquery?

EDIT: Per @8oh8's solution, I now am calling the mask functions in the success portion of my javascript. This now works with my original approach of returning my 'html' variable rather than generating a new request:

$(document).ready(function() {
    mask_functions();
});

function mask_functions(){
    $(".date").mask("99-99-9999");
    $("#weight").mask("9.9?9?9");
};

function manage_exam_AJAX(form_name, exam_id, course_id){
    var data = {form_name: form_name,
                exam_id: exam_id,
                course_id: course_id};
    $.ajax({
        type: 'post',
        dataType: 'html',
        url: 'manage_exams',
        async: false,
        data: data,
        success: function (response, status, xml) {
            if(response.error)
            {
                alert(response.data);
            }
            else
            {
                $("#main_content").html(response);
                mask_functions();
            }
        },
    error: function(response, status, xml) {
        alert(JSON.stringify(response));
        }
    });
}

CodePudding user response：

I'm not exactly sure what the mask() function does but I suspect that some bindings are being destroyed after the HTML is swapped. Try calling the mask function again once the new HTML is set.