Каков наилучший способ избежать дублирования кода в этих двух функциях, которые делают одно и то же?
-
06-07-2019 - |
Вопрос
Учитывая эту форму (которая содержит кнопку отправки):
<form id="review_form">
<input type="submit" id="btn_submit" value="Submit with ajax! (submit button)">
</form>
и эта ссылка (для отправки той же формы):
<a href="#" id="lnk_submit">Submit with ajax! (hyperlink)</a>
В следующем коде jQuery при щелчке элемента #btn_submit
форма ( #review_form)
передается с помощью ajax:
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this;
};
$(document).ready(function() {
$("#btn_submit").submitWithAjax();
})
Я хочу удалить кнопку отправки и отправить форму, используя ссылку выше ( #lnk_submit
), примерно так:
$("#lnk_submit").click(function(){
$("#review_form").submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
});
return false;
});
Но проблема в том, что дублирует весь код в jQuery.fn.submitWithAjax
, определенного выше.
Какой лучший способ избежать дублирования кода здесь?
Решение
Как насчет того, чтобы у вас была такая функция:
function submitWithAjax() {
$("#review_form").submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
});
}
А затем свяжите оба действия с функцией:
$(document).ready(submitWithAjax);
$("#lnk_submit").click(submitWithAjax);
Другие советы
Возможно, я упрощаю, но вы не можете просто присвоить функцию переменной и использовать ее повторно?
var submitWithAjaxFn = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this;
};
jQuery.fn.submitWithAjax = submitWithAjaxFn;
$("#lnk_submit").click(function(){
$("#review_form").submit(submitWithAjaxFn);
return false;
});
Самый простой ответ (хотя, возможно, не самый элегантный) - использовать вторую функцию для обоих (которая явно относится к вашей форме независимо от того, что вызывает функцию), а затем присвоить каждому «триггеру» один и тот же класс и прикрепить щелчок. событие для обоих. Р>
Если вы хотите использовать те же функции для гиперссылки, сделайте действие гиперссылки простым нажатием кнопки.
$('#lnk_submit').click(function(e){ $('#btn_submit').click(); return false; });