Bootbox Not Showing Message on Successive Loads

Question

I am using bootbox dialogue to load a form in it. The form is defined as following:

<form id="classdefForm" method="POST" style="display:none">
    <div class="row">
        <div class="col-md-12 padfeedbackicon">
            <div class="form-group">
                <label class="control-label" for="cdcourseid">Course ID</label>
                <div class="input-group">
                    <input type="text" name="cdcourseid" id="cdcourseid" class="form-control dataaccess" placeholder="Course ID" required="" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" id="getClassCourseID"><span class="fa fa-bars"></span></button>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group padfeedbackicon">
                <label class="control-label" for="cdintake">Class Intake</label>
                <div class="input-group">
                    <input class="form-control date-picker" name="cdintake" id="cdintake" type="text" placeholder="Class Intake" data-date-format="yyyy-mm-dd" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <label class="control-label" for="cdstudymode">Study Mode</label>
                <select id="cdstudymode" name="cdstudymode" style="width:100%">
                    <option value="J">Module I</option>
                    <option value="S">Module II</option>
                </select>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <label class="control-label" for="cdattendancemode">Attendance Mode</label>
                <select id="cdattendancemode" name="cdattendancemode" style="width:100%">
                    <option value="FT">Full Time</option>
                    <option value="PT">Part Time</option>
                    <option value="EV">Evening</option>
                    <option value="WE">Weekend</option>
                </select>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <button type="submit" class="btn btn-default" id="saveclassdef"><i class="fa fa-save fa-lg" /> Create Class</button>
                <button type="reset" class="btn btn-default"><span class="fa fa-times-circle-o fa-lg"></span> Cancel</button>
            </div>                                
        </div>
    </div>
</form>

And then the form is loaded in the bootbox dialogue like this:

$("#getDefineClassCode").on("click",function(){
       // alert($("#classdefForm").length);
        var diag=bootbox
            .dialog({
                message: $('#classdefForm'),
                title: "Class Definition",
                className: "modal-blue",
                show: false
            })
            .on('shown.bs.modal', function(e) {
                if(e.target===this)
                {
                    $('#classdefForm')
                        .show()                             /* Show the form */
                        .formValidation('resetForm', true); /* Reset form */
                }                
            })
            .on('hide.bs.modal', function(e) {
                if(e.target===this)
                {
                    $('#classdefForm').hide().appendTo('body');
                }
                //alert("")
            })
            .modal('show');

        //once the course id in the diag dialogue is clicked..
        diag.find("#getClassCourseID").on("click",function(){
        targetField=diag.find("#cdcourseid");
        GenericDialogue("courses","Courses");            
        })
        //setting the date picker for the cdintake
        diag.find(".date-picker").datepicker({autoclose:true}).on("changeDate",function(){
            $('#classdefForm').formValidation('revalidateField', 'cdintake');
        });

    });

On that dialogue i load another bootbox dialogue which returns a value in cdcourseid inside the already shown dialogue. That works fine. Now after filling the entire form in the bootbox, i click the submit button which validates it using formValidation and the dialogue is closed like this:

$("#classdefForm").formValidation({
    framework: 'bootstrap',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        cdcourseid: {
            validators: {
                notEmpty: {
                    message: 'Class course id is required'
                }
            }
        },
        cdintake: {
            validators: {
                notEmpty: {
                    message: 'Class intake is required'
                }
            }
        },
        cdstudymode: {
            validators: {
                notEmpty: {
                    message: 'Class study mode is required'
                }
            }
        },
        cdattendancemode: {
            validators: {
                notEmpty: {
                    message: 'Class attendance mode is required'
                }
            }
        }
    }
})
 .on("success.form.fv", function(e){
    e.preventDefault();
    //perform some operations here then hide the form
    // Hide the modal containing the form
    $form.parents('.bootbox').modal('hide');
});

After that i refresh the page which launched the bootbox dialogue. The problem is, when i click the button again, the booxbox dialogue is shown without my classdefForm What am i doing wrong? Hope i am understood. Thank you!

Answer 1

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});