Question

我尝试通过点击用户列表生成表单并使用AJAX发布数据。 preventDefault元素无效。我想使用AJAX验证表单，而无需重新加载页面。

我的代码：

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

这是用于使用AJAX验证表单的代码。 preventDefault无效。

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

尝试

$( "#thinks_post" ).on( "submit", "a", function( e ) {

Answer 2

你应该使用jquery＆＃34; .live（）＆＃34;而不是直接提交如下，因为你通过js创建表单。

$(document).ready(function(){
 $('#thinks_post').live('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 3

您必须首先将form附加到DOM，然后才能执行ev.preventDefault＆amp; submit。

我的formMapper代码的基本和平：

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

然后在事件处理程序中：

$('.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();
    }
});

所以在你的情况下：

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

...并没有加起来：

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

...因为在您附加表单之前，事件处理程序已经绑定了。因此，代表团on()。

也许这样试试：

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

希望它有意义^^

Answer 4

而不是e.preventDefault（）; 尝试使用

返回false;

在您的处理程序结束时

jQuery的preventDefault不能处理生成的表单

4 个答案: