jQuery - Can't add class to elements dynamically added to DOM

Question

I have the following markup returned by an AJAX request:

<form id="quotation-form" name="quotation-form" action="" method="POST">
    <label for="site-name">Site Name:</label>
    <input type="text" id="site-name" name="site-name" />

    <label for="postcode">Site Postcode:</label>
    <input type="text" id="postcode" name="postcode" />

    <label for="bandwidth-requirement">Bandwidth Requirement:</label>
    <select id="bandwidth-requirement" id="bandwidth-requirement">
       <option value="10" selected>10Mb</option>
       <option value="20">20Mb</option>
       <option value="30">30Mb</option>
    </select>

    <input type="submit" name="quotation-form-submit" id="quotation-form-submit" value="Get Quotation" />

</form>

jQuery

$(document).on("submit", "#quotation-form", function() {
    // cache form input id's
    var site_name             = $('#site-name');
    var postcode              = $('#postcode');
    var bandwidth_requirement = $('#bandwidth-requirement');

    var valid = 1;

    // validate form input values
    if (site_name.val() == '') {
        name.addClass('error');
        valid = 0;
     } else {
         site_name.removeClass('error');
     }

     if (postcode.val() == '' || !checkPostcode(postcode.val())) {
         postcode.addClass('error');
         valid = 0;
     } else {
         postcode.removeClass('error');
     }

     if (bandwidth_requirement.val() == '') {
         bandwidth_requirement.addClass('error');
         valid = 0;
     } else {
         bandwidth_requirement.removeClass('error');
     }

});

The error is:

Uncaught TypeError: Object has no method 'addClass'

I tried an alert before adding this validation and it worked fine so not sure what the problem is.

Answer 1

You don't seem to have a name var declared anywhere in this scope.

Do you have it declared outside this scope? I believe you probably want:

if (site_name.val() == '') {
    site_name.addClass('error');
    valid = 0;
} else {
     site_name.removeClass('error');
}

Did you step through with your debugger? It would probably reveal that name is null...