jQuery - Form仍然以返回false提交

时间:2022-11-23 19:43:50

http://jsfiddle.net/QsTfc/

http://jsfiddle.net/QsTfc/

For some odd reason the form keeps submitting even though I am returning false. I have tried:

由于某种奇怪的原因,即使我返回false,表单仍然继续提交。我有尝试:

$("#submitEdit").submit(function() {
    return false;
});

$("#submitEdit").submit(function() {
    event.preventDefault();
});

And this is what I currently have:

这就是我目前所拥有的:

<script>

$('a').click(function() {
    var parentId = $(this).closest('tr').attr('id');
    var child = $("#" + parentId).children().eq(1);
    var childText = $(child).text();
    $(child).html('<form action="<?php echo URL; ?>user/changeSettings/' + parentId + '" method="POST" id="submitEdit"><input type="text" name="' + parentId + '" value="' + childText + '" /></form>');
    console.log(childText);
});

$("#submitEdit").on("submit", function() {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
    return false;
});

</script>

2 个解决方案

#1


2  

According to your jsfiddle demo your form is added dinamically. So, you have to use delegation:

根据您的jsfiddle演示,您的表单是按dinamically添加的。所以,你必须使用委托:

$(document).on("submit", "#submitEdit", function() {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
    return false;
});

JSFIDDLE

JSFIDDLE

#2


1  

you need to put your event parameter in your call back function

您需要将事件参数放入回调函数中

$("#submitEdit).submit(function(event) {
    event.preventDefault();
});

and try this:

试试这个:

$(document).on("submit", "#submitEdit", function(event) {
    event.preventDefault();
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
});

when to use return false and when to use event.preventDefault(). you can take a look for this question: When should I use return false in jquery function?

何时使用return false,何时使用event.preventDefault()。您可以看看这个问题:在jquery函数中什么时候应该使用return false ?

#1


2  

According to your jsfiddle demo your form is added dinamically. So, you have to use delegation:

根据您的jsfiddle演示,您的表单是按dinamically添加的。所以,你必须使用委托:

$(document).on("submit", "#submitEdit", function() {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
    return false;
});

JSFIDDLE

JSFIDDLE

#2


1  

you need to put your event parameter in your call back function

您需要将事件参数放入回调函数中

$("#submitEdit).submit(function(event) {
    event.preventDefault();
});

and try this:

试试这个:

$(document).on("submit", "#submitEdit", function(event) {
    event.preventDefault();
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
});

when to use return false and when to use event.preventDefault(). you can take a look for this question: When should I use return false in jquery function?

何时使用return false,何时使用event.preventDefault()。您可以看看这个问题:在jquery函数中什么时候应该使用return false ?