Question

如果您查看下面#top_cat和#high_hat部分中的代码，很明显它会做同样的事情。

$(document).ready(function ()
{

    $('#top_cat').submit(function ()
    {
        $.post($(this).attr('action'), $(this).serialize(), null, "script");
        return false;
    });

    $("#tip_click").click(function()
    {
        $("#high_hat").submit()(function ()
        {
            $.post($(this).attr('action'), $(this).serialize(), null, "script");
            return false;
        });
        return false;
    });

});

将内部代码（下面）分隔成自己的函数的正确语法是什么，以便它可以在#top_cat和#high_cat部分内调用，而不存在上面的重复？

   $.post($(this).attr('action'), $(this).serialize(), null, "script");
   return false;

Answer 1

function submitHandler() {
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;
}

$(document).ready(function () {

    $('#top_cat').submit(submitHandler);

    $("#tip_click").click(function() {
        $("#high_hat").submit(submitHandler);
    });

});

Answer 2

关于jQuery的一个很酷的部分是它可以使用任何CSS选择器选择元素，然后将功能附加到整个集合。这包括id的多个异构标记，因此您可以这样做。

$("#top_cat,#high_hat").submit(function ()
{
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;
});

Answer 3

您可能想制作一个可以提交的插件：

;(function($){
    $.fn.extend({
        submitAction: function() {
            this.each(function() {
               $.SubmitAction(this);
            });
            return this;
        }
    });

    $.SubmitAction  = function(ctl) {
        $(ctl).filter('form').submit( function() {
            $.post( $(this).attr('action'), $(this).serialize(), null, 'script' );
            return false;
        });
    };     
})(jquery);

被称为：

$('#top_cat').submitAction();

Answer 4

我完全从提供的答案中走了.....

我在js文件中有这个功能：

$("form[rel=ajaxed]").submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;    
});

然后需要由ajax提交的任何表单都是这样定义的：

<form action="someurl.com/file.php" method="post" rel="ajaxed">

注意rel="ajaxed"，jQuery完成剩下的选择器魔术......

Answer 5

你的复制就是这部分：

element.submit()(function ()
{
     $.post($(this).attr('action'), $(this).serialize(), null, "script");
     return false;
});
return false;

你可以这样做： mysubmitfunc('#high_hat')

该功能是重复的代码。

Answer 6

$(document).ready(function(){
    $('#top_cat').submit(on_submit);

    $("#tip_click").click(function(){
        $("#high_hat").submit(on_submit);
        return false;
    });
});

function on_submit()
{
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;
}

抽象此代码的最佳方法是什么？

6 个答案: