Как мне установить функцию .submit jquery в динамических формах?

Question

Здравствуйте, у меня есть страница, отображающая jquery datepicker и основанная на datepicker a fetch и показывающая пользовательскую форму:

            <div id="datepicker"></div>
            <script type="application/javascript">
                function fetch_form (date_string, inst) {
                    var date = $('#datepicker').datepicker('getDate');
                    var date_list = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
                    var url = "/luncher/by_date/" + date_list.join("/");    

                    $.ajax({
                        url: url,
                        cache: false,
                        success: function(html){
                            $("#form-container").html(html);
                          }
                        });

                    ajax_form();
                }

                function ajax_form () {
                    $("#food_form").ready(function(){
                        $("#food_form").submit(function(e){
                            alert(e);
                          });
                    });
                }

                $('#datepicker').datepicker({
                     firstDay: 1,
                     onSelect: fetch_form, 
                     });
                now = new Date();
                fetch_form(now);
            </script>
        </div>
        <div class="span6" id="form-container">
        </div>

Проблема в том, что мне нужно установить пользовательскую функцию .submit для извлеченной формы, я пробовал это в функции ajax_form, но форма игнорирует мои настройки, и форма отправляется обычным способом.

Вот образец формы:

<h1>Dishes for Dec. 15, 2011</h1>
<form id="food_form" action="/luncher/by_date/2011/12/15" method="post"> 
    <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='9ba228bab1a61b993eba4180f2a2237e' /></div>
    <table>
        <tr><th></th><th>Dish:</th><th>Enjoyed?</th><th>More often?</th></tr>

            <tr><td>Lunch</td><td><select name="lunch" id="id_lunch">
<option value="55">Vinná klobáska s bramborovou kaší</option>

<option value="56">Filety s koprovou omáčkou</option>
<option value="57">Dukátové buchtičky</option>
</select></td><td><input type="checkbox" name="lunch_taste" id="id_lunch_taste" /></td><td><input type="checkbox" name="lunch_preference" id="id_lunch_preference" /></td></tr>


            <tr><td>Soup</td><td><select name="soup" id="id_soup">
<option value="53">Zeleninový vývar</option>
<option value="54">Bramborová</option>
</select></td><td><input type="checkbox" name="soup_taste" id="id_soup_taste" /></td><td><input type="checkbox" name="soup_preference" id="id_soup_preference" /></td></tr>


            <tr><td>Dinner</td><td><select name="dinner" id="id_dinner">
<option value="58">Kuřecí nudličky gyros s tzatzikami</option>

<option value="59">Sýrové těstoviny</option>
</select></td><td><input type="checkbox" name="dinner_taste" id="id_dinner_taste" /></td><td><input type="checkbox" name="dinner_preference" id="id_dinner_preference" /></td></tr>

    </table>

Спасибо за любую помощь!

Answer 1

$(document).on('submit', '#food_form', function(e){
       alert(e);
       e.preventDefault();
});

Answer 2

$('#form-container').on('submit', '#food_form', function () {
    //custom code here
});

Использование .on() подобно этому похоже на .delegate(), где мы:

Присоединяем обработчик к событиям для всех элементов, которые соответствуют селектору, сейчас или в будущем, на основев определенном наборе корневых элементов

Источник: http://api.jquery.com/delegate/

Другое решение заключается в подключении обработчика событий при вставке формы в DOM:

                $.ajax({ 
                    url: url, 
                    cache: false, 
                    success: function(html){ 
                        $("#form-container").html(html);
                        $('#food_form').on('submit', function () {
                            //custom code here
                        });
                      } 
                    }); 

Использование .on() подобно этому аналогично .bind(), когда элемент должен присутствовать в DOM при выполнении вызова.