jquery - jQuery - DOM に動的に追加された要素にクラスを追加できない

Question

AJAX リクエストによって返される次のマークアップがあります。

<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');
     }

});

エラーは次のとおりです。

Uncaught TypeError: Object has no method 'addClass'

この検証を追加する前にアラートを試してみましたが、うまく機能したので、何が問題なのかわかりません。