jquery submit form с ajax после элемента элемента click

Question

У меня проблемы, чтобы получить работу над этим скриптом. Я хочу отправить форму как ajax путем отправки триггера после нажатия элемента div.

Это форма код:

<div title="add to Favorits" id="social1549" class="favtrigger nobtn transition"> 
    <form name="favoritform" id="formsocial1549" action="/dienstleister/fotografen/1549/verlobungsfotos-im-studio-hochzeitsfotografie" method="post" accept-charset="utf-8"> 
     <input type="hidden" name="favorit" value="1549"> 
     <div id="submitsocial1549" class="layout"> 
      <div class="favicon_off"></div> 
      <p>as Favorit</p> 
     </div>  
    </form> 
</div> 

И это код JQuery.

<script> 
    $(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); 
        } 
       }); 
      }); 
     }); 
    }); 
</script> 

Что я делаю неправильно?

Answer 1

Я не вижу необходимости отправлять форму, если вы используете ее только для получения ссылки на действие. Я бы полностью отпустил форму.

$(document).ready(function() { 
    $(document).on('click', '.favtrigger', function() { 
     var favid = $(this).attr('id'); 
     var form = $(this).find('#form' + favid); 
     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); 
      } 
     }); 

    }); 
});