Какой лучший способ абстрагировать этот код?

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 и затем добавлять функциональность ко всему набору. Это включает в себя несколько разнородных тегов по идентификатору, так что вы можете сделать это.

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

Answer 3

Я иду совершенно другим путем из предоставленных ответов .....

У меня есть эта функция в файле 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 4

Возможно, вы захотите создать плагин, который будет делать ваши представления:

;(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 5

$(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;
}

Answer 6

Ваше дублирование это часть:

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

Вы можете сделать: mysubmitfunc('#high_hat')

Где функция - дублированный код.