jQuery: كيفية تمرير البيانات الوصفية للحدث على عناصر HTML مع الحفاظ على صحة XHTML؟

Question

أنا متأكد من أن الكثير منكم قد صادف هذه المعضلة في وقت واحد أو آخر:

لدي عنصر HTML على مستوى الكتلة يحتوي على عناصر متعددة على مستوى الكتلة وعلى مستوى الخط ، على سبيل المثال

<div id="ajax">
   <h2>Something</h2>
   <div class="icon"></div>
   <div class="clear"></div>
   <div class="somethingelse"><h3>blah</h3></div>
</div>

أرغب ببساطة في إرفاق حدث jQuery Ajax () بنقرة على #ajax (العنصر الأعلى مستوى) ، لكنني بحاجة إلى المرور عبر بعض المعلمات إلى البرنامج النصي من جانب الخادم.

إحدى الطرق الممكنة التي أراها هي ببساطة استبدال div#ajax مع a#ajax, ، مما يسمح لي بإضافة شيء مثل href="param=value&this=that", ، لكن هذا من شأنه أن يجعل الصفحة غير صالحة: لا يمكن أن يكون هناك أي عناصر على مستوى الكتلة (<div>) داخل عنصر مضمّن (<a>).

طريقة أخرى ممكنة هي إضافة أ rel يعزو إلى div#ajax, ، مما يعني أيضًا إهمال التحقق من صحة XHTML.

لا أريد أن أضيف مضمراً onclick الأحداث إلى divs ، هذا بعيد قليلا ... أيضا ، تحول جميع الأطفال من div#ajax إلى على سبيل المثال <span> سيكون بيتا كبرى.

كيف يمكنك التعامل مع هذا؟

شكرًا!

Answer 1

هناك عدة طرق للقيام بذلك مع الحفاظ على صحة XHTML ، أو على الأقل وظيفية كاملة في جميع المتصفحات:

الخيار الأول ، ضع المعلمات مباشرة في JavaScript في مكان ما ، وهذا هو أبسط.

---

ثانياً ، إذا لم تتمكن من القيام بذلك في البرنامج النصي ، يمكنك استخدام المرساة ، ولكن داخل, ، لا لفها ، مثل هذا:

<div id="ajax">
   <h2>Something</h2>
   <div class="icon"></div>
   <div class="clear"></div>
   <div class="somethingelse"><h3>blah</h3></div>
   <a class="params" href="page.htm?param=value&this=that"></a>
</div>

CSS يخفيها:

.params { display: none; }

و jQuery باستخدامه:

$("#ajax").click(function() {
   $.ajax({
     url: $(this).find(".params").attr("href");
     success: function() {
       //do something
     }
   });
});

---

ثالثا ، الاستخدام سمات بيانات HTML5, ، سيؤدي ذلك إلى كسر صلاحية XHTML الصارمة ، ولكن طريقة مستقبلية رائعة للذهاب ، لن تسبب أي مشاكل في المتصفحات الحالية.

---

الخيار الأخير (الذي يمكنني التفكير فيه) ، استخدم jquery metadata البرنامج المساعد أو تخزين ما تريد.