Question

Hello I have a page displaying jquery datepicker and based on the datepicker a fetch and show custom form:

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

The problem is that I need to set custom .submit function for fetched form, I have tried that in ajax_form function, but the form is ignoring my customization and the form is submitted in normal way.

Here is sample form being fetched:

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

Thanks for any help!

Answer 1

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

Using .on() like this is similar to .delegate() where we:

Attach a handler to events for all elements that match the selector, now or in the future,
based on a specific set of root elements

Source: http://api.jquery.com/delegate/

Another solution is to attach the event handler when the form is inserted into the DOM:

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

Using .on() like this is similar to .bind() where the element must be present in the DOM when the call is made.