1

我有一个 php 页面，上面有多个表单，我希望 jquery 在单击提交后隐藏每个表单（不刷新页面）。每次创建 php 页面时，表单的 id 都是动态生成的并且是唯一的。

如果我不使用preventDefault，那么下面的脚本会提交数据，但它会刷新页面（我不想要）。如果我使用preventDefault，表单仍然提交，但没有数据（serialize似乎不起作用）。 

<script>
$(document).ready(function() {
    $(".connection").click(function(e) {
        e.preventDefault();
        var data = $(this).serialize();
        var element = $(this);
        var connectid = element.attr("id");
        $.ajax({
            url: "/beta/membersarea.php",
            type: "POST",
            cache: false,
            data: data,
            success: function(data) {
                $("#connected_" + connectid).hide();
            }
        });
    });
});​   
</script>
4

2 回答 2

2

$(this)在您的代码中是提交按钮，而不是表单...... this在 jQuery 处理程序中是处理程序附加到的 DOM 元素。

从此改变：

$(".connection").click

对此：

$("form").submit(function(e) {

完整代码：

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();
        var $element = $(this);
        var data = $element.serialize();
        $.ajax({
            url: "/beta/membersarea.php",
            type: "POST",
            cache: false,
            data: data,
            success: function(data) {
                $element.hide();
            }
        });
    });
});​
于 2012-04-16T21:30:20.880 回答
0

preventDefault 是为了阻止默认操作，在这种情况下是正常的表单提交。我猜你的问题是你没有序列化正确的元素（表单）。尝试这个

$(this)表示当前项目。当您在提交按钮单击中访问 $(this) 时，它指的是表单中的提交按钮元素。不是持有提交按钮的表单。

$(document).ready(function () {
    $(".connection").click(function(e) {
        e.preventDefault();
        var data = $("form").serialize();
        var element = $(this);
        var connectid = element.attr("id");
        $.ajax({
            url: "/beta/membersarea.php",
            type: "POST",
            cache: false,
            data: data,
                success: function(data)
                {
                $("#connected_"+connectid).hide();
                }
              });
      });    
});

假设connection是提交按钮的类名。

于 2012-04-16T21:31:47.767 回答