ما هي أفضل طريقة لتجنب رمز الازدواجية في هاتين الوظيفتين أن تفعل نفس الشيء ؟
-
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>
في ما يلي رمز مسج, عندما #btn_submit
عنصر النقر على النموذج (#review_form)
مقدم مع اياكس:
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; });