Question

我需要知道是否可以这样做。我有一个MVC应用程序，我循环访问一些数据并为每个对象输出一个表单。在项目的表单提交上，它会发布到服务器并返回更新的视图。我想用新的视图数据替换当前的html。

问题是我无法弄清楚如何在Success函数上提交的表单的上下文中获取父元素，子元素或特定元素。我也试过$（this）.parent，$（this）.child等。它将表单视为一个对象，而不是一个html元素，所以我猜这些查询函数不能正常工作。

是否可以这样做或者我是否需要添加某种类型的hack来获取Success函数中的唯一元素id，而不是尝试使用$（this）？

<script type="text/javascript">
    $(function () {
        $("#form").live("submit", function (e) {
            $.post($(this).attr("action"),
                $(this).serialize(),
                function (response) {
                    var form = $(this);
                    var container = $("#itemContainer", form);
                    container.html(response);
                });
            e.preventDefault();
        });
    });
</script>

Answer 1

<script type="text/javascript">
    $(function () {
        $("#form").live("submit", function (e) {
            $.post($(this).attr("action"),
                $(this).serialize(),
                $.proxy( function (response) {
                    var form = $(this);
                    var container = $("#itemContainer", form);
                    container.html(response);
                }, this ) );
            e.preventDefault();
        });
    });
</script>

jQuery.proxy

Answer 2

您可以在闭包中捕获this：

var $form = $(this);
$.post($(this).attr("action"), $(this).serialize(), function (response) {
    // $form was captured in a closure here
    var container = $("#itemContainer", $form);
    container.html(response);
});

或者如果您将$.post替换为$.ajax，则可以将context传递给成功回调：

$.ajax({
    url: $(this).attr("action"),
    type: 'POST',
    data: $(this).serialize(),
    context: $(this),
    success: function(response) {
        // At this stage "this" is the original form as we 
        // passed it using the context parameter
        var container = $("#itemContainer", this); 
        container.html(response);
    }
});

Answer 3

如果要查找表单子元素，请使用

form.find("input") //this will search only inside your form

或

 form.children() //this will get all the elements inside the form

form.child或form.parent不起作用的原因是因为您没有使用元素。您正在使用jQuery对象。

查看http://api.jquery.com/category/traversing/，您可以看到在拥有jQuery对象后可以遍历DOM的所有不同方法。

此外，除非您的表单是通过AJAX加载的，否则您不需要使用已弃用的函数$ .live

<script type="text/javascript">
$(function () {
    $("#form").submit(function (e) {
        var form = $(this);
        $.post(form.attr("action"),
            form.serialize(),
            function (response) {
                var children = form.children();
                var container = $("#itemContainer", form);
                container.html(response);
            });
        e.preventDefault();
    });
});

可以在提交函数中使用jQuery获取提交表单的子元素吗？

3 个答案: