Question

我是jquery / javascript的新手，无法谷歌任何解决方案。

我有从循环自动生成的div数。它们中的每一个都包含form作为子元素。所以在表单提交时，我希望相应的父div为fadeout。

我正在使用Ajax进行表单提交。基本上，现在我有一个事件处理程序'submit'绑定到div中的所有子表单。这就是它的样子

        $('#divCreatedActivities').children('div').children('form').submit(function() {
            var options = { 
                    target:        $('#divCreatedActivities').children('div'), 
                    dataType:      'xml',
                    success:       submittedActivity
            };
            $(this).ajaxSubmit(options); 
            return false; 
        });

        function submittedActivity() {
            alert('ahoy!');     
        }

我怎样才能用JQuery做到这一点？

谢谢。

Answer 1

$('form').submit(function(){
    $(this).parent().fadeOut();
});

这是做到这一点的方法。但我有一个问题，你怎么能在提交时看到它消失？是不是重装还是什么？你在用ajax吗？

根据您编辑的帖子

$('#divCreatedActivities form').submit(function() {
    var $this = $(this);
    var options = { 
         target:        $('#divCreatedActivities').children('div'), 
         dataType:      'xml',
         success:       function() {
                     $this.parent().fadeOut();
                     alert('ahoy!');    
         }
    };
    $this.ajaxSubmit(options); 
    return false; 
});

/* remove this
function submittedActivity() {
    alert('ahoy!');     
} */

_{欢迎来到stackoverflow.com}
_{不要忘记接受答案}

Answer 2

是的，您可以使用submit处理程序淡出包含表单的div：

$('#theFormId').submit(function() {
    $('#theDiv').fadeOut();
});

然而，除非您延迟表单提交或使用ajax而不是正常的表单提交，否则动画可能永远不会发生 - 因为正常的表单提交会删除页面并将其替换为结果提交到服务器。因此，例如，如果您希望淡出时间为500毫秒，则可以执行此操作（live example）：

// #theFormId can be any selector that selects the form(s) you want
// handled in this way; it's just an example
$('#theFormId').submit(function() {
    // `this` is set to the form's raw DOM element, remember it for use
    // in the closure below.
    var form = this;

    // Get a jQuery wrapper for the form element, use it to find the
    // first containing div. Start a fadeout on that div, and use the
    // fadeout callback to trigger the actual form submission.
    $(this).parents('div:first').fadeOut(500, function() {
        // Submit the form
        form.submit();
    });

    // Disable *this* form submission in favor of the above
    return false;
});

当然，这会将表单提交延迟半秒，这并非所有用户都喜欢...另外，如果您依赖于知道用户按下了哪个提交按钮，则上面输了（因为我们是我们不再使用按钮提交表单，我们将取消该表单，然后再使用代码提交表单。

在上面我使用parents和选择器“div：first”来找到第一个div的祖先元素;您可以根据需要修改该选择器，或者如果div是表单的 immediate 父级，则可以使用parent代替。

Answer 3

$('#my-form-id').submit(function(){ $(this).parent().fadeOut(600); });

儿童形式事件的jquery div fadeout

3 个答案: