title: jquery submit form with ajax after click div element
body: <p>i have troubles to get work this script. I want to sent a form as ajax by trigger submit after click a div element.</p>
  
  <p>This is the form code:</p>
  
  <pre><code>&lt;div title="add to Favorits" id="social1549" class="favtrigger nobtn transition"&gt;
      &lt;form name="favoritform" id="formsocial1549" action="/dienstleister/fotografen/1549/verlobungsfotos-im-studio-hochzeitsfotografie" method="post" accept-charset="utf-8"&gt;
          &lt;input type="hidden" name="favorit" value="1549"&gt;
          &lt;div id="submitsocial1549" class="layout"&gt;
              &lt;div class="favicon_off"&gt;&lt;/div&gt;
              &lt;p&gt;as Favorit&lt;/p&gt;
          &lt;/div&gt;    
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the jquery code.</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          $('.favtrigger').click(function() {
              var favid = $(this).attr('id');
              var form = $(this).find('#form' + favid);
              alert ('until here it works'); // this works
              form.submit(function(event) {
                  alert ('this doesn't work'); // here nothing happens
                  event.preventDefault();
                  var action = form.attr('action'),
                      method = form.attr('method'),
                      data = form.serialize();
                  $.ajax({
                      url: action,
                      type: method,
                      data: data,
                      success: function(data) {
                          var data = $('#' + favid + ' .layout', data);
                          $('#' + favid + ' .layout').replaceWith(data);
                      }
                  });
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>What i'm doing wrong?</p>