title: JQuery rebinding on vs bind after AJAX query
body: <p>I would like to know why Jquery's <code>.on</code> was never called to rebind my submit button after a AJAX call, Since <code>on</code> is suppose to replace <code>.bind</code> I could not fathom that it was the problem. but i tried various things and the only thing to have worked was to use <code>.bind</code> instead of <code>.on</code>.</p>
  
  <p>My form is attached to a dropdown list that will generate new data into the form on click. This was done on a AJAX Get call and on success i was selecting the form and using:</p>
  
  <p><code>$('#formname').on('submit',function(){})</code></p>
  
  <p>And i then tried </p>
  
  <p><code>$('#formname').on('submit','form', function(){})</code></p>
  
  <p>admittedly i got the above from a question that was never answered.
  <a href="https://stackoverflow.com/questions/8620423/jquery-ajax-form-using-onsubmit">jquery-ajax-form-using-onsubmit</a></p>
  
  <p>I also tried attaching the on submit to the body element as it doesn't change with the AJAX function <code>$('.container').on('submit','#formname', function(){})</code> suggested here:
  <a href="https://stackoverflow.com/questions/13767919/jquery-event-wont-fire-after-ajax-call">jquery bind functions and triggers after ajax call</a>  </p>
  
  <p>but that was also ignored. I then tried replacing the type of 'submit' to 'button' then assign <code>.on('click', etc...</code> in case you could not rebind a submit button after the form had reached the DOM.</p>
  
  <p>but the only thing that worked was calling <code>.bind</code>, i am lost as i am wanting to use the correct standards. my completed code looks like so, note wherever there is a <code>.bind</code> it was previously an <code>.on</code> which was not invoked.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  (function ($){
      $('select#&lt;?php echo $dropdown; ?&gt;').on('click', function(){
          var value = $(this).val();
          var form = 'form#&lt;?php echo $gridName; ?&gt;' 
          $.ajax({
              type: "GET",
              url: $(form).prop('action') ,
              data: { gg:value },
              dataType: "html",
              cache: false,
              success: function(htmlResponse){
                  var src = $(form , htmlResponse);
                  $('.page_1col_col1').html( src );
                  //replace the submit with a input buton to tesk on click
                  //$('#&lt;?php echo $gridName; ?&gt; input[type="submit"]').prop('type','button');
                  $('#&lt;?php echo $gridName; ?&gt;').bind('submit',function (){
                      rowBinding();
                      //replace the submit with a input btn
                      $.ajax({
                          type:"POST",
                          url: $(form).prop('action'),
                          dataType: "html",
                          cache: false
                      });
  
                  });
              }
  
          });
      });
  }(jQuery));
  
  $(document).ready(function(){
      $('#&lt;?php echo $gridName; ?&gt;').bind('submit',rowBinding);
  });
  
  
  function rowBinding(){ //stuff}&lt;/script&gt;
  </code></pre>