jQuery's preventDefault is not working on generated form

Question

I'm trying to generate a form by clicking on users list and post the data with AJAX. The preventDefault element is not working. I want to verify form, using AJAX, without reloading the page.

My code:

$(function(){
    $("#members_list ul > li").click(function(){
        var name = $(this).attr("name");
        var m_id = $(this).attr("m_id");
        var from = '<section id="members_ask">'+
        '<font size="5"face="comic sans ms"><b>Que penssez vous de '+ name+ ' ?:</b></font>'+
        '<form class="form_th"id="thinks_post"method="post" action="sendthinks.php">'+
        '<input type="hidden" name="members_id" value="'+m_id+'">'+
        '<table>'+
        '<tr> <td></td> <td></td></tr>'+
        '<tr> <td>Que pensser vous :</td> <td><textarea id="thinks_zone" cols="40" name="thinks"> </textarea></td></tr>'+
            '<tr><td> Vos Suggestion :</td> <td><textarea id="thinks_sugg_zone" cols="40" name="thinks-sugg" > </textarea></td> </tr>'+
            '<tr> <td>Qu\'envisager vous? :</td> <td>'+
        '<select name="wants">'+
        '<option value="volvo">Amitier</option>'+
        '<option value="saab">Amour</option>'+
        '<option value="audi">S\'éloigner</option>'+
        '</select> </td></tr>'+
        '<tr> <td>Votre Note :</td> <td> <select name="note">'+
        '<option value="1">1/5</option>'+
        '<option value="2">2/5</option>'+
        '<option value="3">3/5</option>'+
        '<option value="4">4/5</option>'+
        '<option value="5">5/5</option>'+
        '</select> </td></tr>'+
        '<tr> <td></td> <td><button  id="valid_thinks_butt"type="submit" name="valid_thinks"> Poster </button></td></tr>'+
        '</table>'+
        '</form>'+
    '</section>';

        $("#members_bott_panel").html(from);
    });
});

This is the code used to verify the form using AJAX. The preventDefault is not working.

$(document).ready(function(){
    $('#thinks_post').submit(function(e){
        e.preventDefault();
        var $this = $(this);
        var thinks_zone = $("#thinks_zone").val();
        var thinks_sugg_zone = $("#thinks_sugg_zone").val();
        if(thinks_sugg_zone === '' || thinks_sugg_zone === '')
        {
            alert("fuck");
        }
        else
        {
            $.ajax({
                url: $this.attr("action"),
                type: $this.attr("method"),
                data: $this.serialize(),
                success: function(html){
                    alert(html);
                }
            });
        }
    });
});

Answer 1

You need to append the form first to the DOM, before you can do ev.preventDefault & submit.

An essential peace of my formMapper code:

$(document.body).append(newForm);
newForm.submit();

Then in the event handler:

$('.myFormSelector').on('submit', function (ev) {
    var form = $(this),
        newForm;

    ev.preventDefault();
    newForm = self.getMapperForm(); // the method where I append

    if (newForm.length) {
        self.mapFields(form, newForm); // the method where I map fields
        newForm.submit();
    }
});

So in your case:

$("#members_bott_panel").html(from);

... doesn't add up to:

$('#thinks_post').submit(function(e){});

... because the eventhandler was already bound, before you append your form. Hence the delegation with on().

Perhaps try it like this:

$("#members_bott_panel").on('submit', '#thinks_post', function(e){/*your stuff here*/});

Hope it makes sense ^^