title: activating custom class button dynamically
body: <p>I'm using javascript to dynamically create a button where I set all the attributes and show it on my page. Then using jQuery I implement hover and click logic to change the layout of the button's class. When the button is created it's class layout is what it should be, but when hovered over or clicked it does not change like it does when I create it before runtime.</p>
  
  <p>The javascipt code:</p>
  
  <pre><code>function createbutton()
  {
  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("class", "fg-button ui-state-default ui-corner-all");
  btn.setAttribute("value", "click!");
  btn.setAttribute("onclick", "createbutton()");
  
  theParent = document.getElementById("content");
  theParent.appendChild(btn);
  }
  $(function(){
      //all hover and click logic for buttons     
      $(".fg-button:not(.ui-state-disabled)")
      .hover(
          function(){ 
              $(this).addClass("ui-state-hover"); 
          },
          function(){ 
              $(this).removeClass("ui-state-hover"); 
          }
      )
      .mousedown(function(){
              $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
              if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
              else { $(this).addClass("ui-state-active"); }   
      })
      .mouseup(function(){
          if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
              $(this).removeClass("ui-state-active");
          }
      });
  });
  </code></pre>
  
  <p>In HTML:</p>
  
  <pre><code>&lt;input type="button" onclick="createbutton()" value="CLICK" &gt;
  &lt;div id="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there another attribute I should set, or should I do something else to activate the jQuery function when the button is created?</p>
  
  <p>Edit(updated function):</p>
  
  <pre><code>$('body').on(
  {
      mousedown: function() 
      {
          $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
          if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
          else { $(this).addClass("ui-state-active"); }
  
      },
      mouseup: function() 
      {
          if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){$(this).removeClass("ui-state-active");}
      },
      mouseenter: function()
      {
          $(this).addClass("ui-state-hover"); 
      },
      mouseleave: function()
      {
          $(this).removeClass("ui-state-hover"); 
      }       
  }, '.fg-button:not(.ui-state-disabled)');
  </code></pre>