title: Method Chaining Won't Work for the dynamically created element in JQuery
body: <p>I have 3 <code>input</code> fields inside a table row that are needed to validate on the client-side without pressing the <code>submit</code> button:</p>
  
  <pre><code>&lt;td&gt;
    &lt;input name="clr" type="number" class="form-control" min="27" step="any"&gt;
  &lt;/td&gt;
  &lt;td&gt;
    &lt;input name="litre" type="number" class="form-control" min="0.5" step="any"&gt;
  &lt;/td&gt;
  &lt;td&gt;
    &lt;input name="fat" type="number" class="form-control" min="3.0" max="7.0" step="any"&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>So I attach <code>blur</code> and <code>invalid</code> events. I also need to attach those two events on the <strong>dynamically created input fields</strong>. </p>
  
  <p>Below code is work for static input fields:</p>
  
  <pre><code>$('input[name="clr"], input[name="litre"], input[name="fat"]').on('blur', function(event) {
    event.target.checkValidity();
    $(event.target).removeClass("errorClass");
  }).on('invalid', function(event) {
    setTimeout(function() {
      $(event.target).focus().addClass("errorClass");
    }, 50);
  });
  </code></pre>
  
  <p>For dynamically created elements I tried this code:</p>
  
  <pre><code>$(document).on({
      'blur': function(event) {
        event.target.checkValidity();
        $(event.target).removeClass("errorClass");
      },
      'invalid': function(event) {
        setTimeout(function() {
          $(event.target).focus().addClass("errorClass");
        }, 50);
      }
    },
    'input[name="clr"], input[name="litre"], input[name="fat"]'
  );
  </code></pre>
  
  <p>BUT this won't work! </p>
  
  <p>Can anyone give me suggestion how can I overcome this problem?</p>
  
  <p><strong>EDIT:</strong> Heres, how I created the dynamically elements:</p>
  
  <pre><code>let clrTd = '&lt;td&gt;&lt;input name="clr" type="number" class="form-control" min="27" step="any"&gt;&lt;/td&gt;';
  let litreTd = '&lt;td&gt;&lt;input name="litre" type="number" class="form-control" min="0.5" step="any"&gt;&lt;/td&gt;';
  let fatTd = '&lt;td&gt;&lt;input name="fat" type="number" class="form-control" min="3.0" max="7.0" step="any"&gt;&lt;/td&gt;';
  
  $(document).on('blur', 'input[name="code"]', function () {
      if ($(this).closest("tr").is(":last-child") &amp;&amp; $(this).val() != '') {
          var markup = "&lt;tr&gt;" + clrTd + litreTd + fatTd + "&lt;/tr&gt; ";
          $("#editableTable tbody").append(markup);
      }
  });
  </code></pre>