title: Adding keyup events to dynamically generated elements using jquery
body: <p>I have a button which creates text boxes dynamically and there is another button 'Clear'.</p>
  
  <p>If there is no text in any of the text field then the clear button is disabled or else it will be enabled. It works for the text box that is created when the dom is loaded but for the dynamically created textboxes it does not work.</p>
  
  <p>Here is the <strong>HTML</strong></p>
  
  <pre><code>&lt;input type="button" value="Click Me" class="a" /&gt;
  &lt;input type="button" value="Clear" class="a" id="clearBasicSearch" /&gt;
  &lt;div id="basicSearchFields"&gt;
      &lt;input type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(".a").click(function () {
      $("#basicSearchFields").append("&lt;input type='text' class='b' /&gt;");
  });
  
  /*$(".b").live("keyup", function () {
          //alert('you pressed ' + $(this).val());
          $(this).val($(this).val().toUpperCase());
          });*/
  
  var toValidate = $("#basicSearchFields input[type='text']");
  $("#clearBasicSearch").removeClass('hidden').removeClass('button').attr('disabled', true);
  
  toValidate.live('keyup', function () {
      console.log("hi");
      var valid = false; //default is false
      toValidate.each(function () {
          if ($(this).val().length &gt; 0) {
              valid = true; //non-empty element found
              return false; //break
          }
      });
      $("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
  });
  </code></pre>
  
  <p>JSfiddle link - <a href="http://jsfiddle.net/TpExS/" rel="noreferrer">http://jsfiddle.net/TpExS/</a></p>
  
  <p>Please help me out!!</p>