如何在动态表单中设置 .submit jquery 函数？

Question

您好，我有一个页面显示 jquery datepicker，并基于 datepicker 获取并显示自定义表单：

            <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 中。