هل من الممكن تشغيل حدث JQuery Click على صورة خلفية في قائمة؟

Question

لدي قائمة غير مدرجة من العناصر، شيء من هذا القبيل، تقصير للإيجاز:

<div id="elementsContainer">
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
  </ul>
</div>

لدي قائمة على التصميم، لكن هذه الأنماط الثلاثة تتعامل مع صور الخلفية للعناصر القائمة:

#elementsContainer ul li {
    list-style:none;
}
#elementsContainer a {
    background: transparent url(/images/icons/bullet_delete.png) no-repeat 5px 50%;
}

#elementsContainer a:hover,
#elementsContainer a:focus,
#elementsContainer a:active {
    background:#fff url(/images/icons/delete.png) no-repeat 5px 50%;
}

تبدو القائمة رائعة - إنها تضع أيقونة حذف صغيرة على يسار النص لكل عنصر قائمة. ومع ذلك، أنا أتطلع إلى استخدام jQuery (1.3) لمعالجة أحداث النقر لكل عنصر، وأود أن وظيفة منفصلة بين صورة الخلفية لعنصر القائمة ونص عنصر القائمة. إذا قمت بالنقر فوق الصورة، فأنا أريد حذف العنصر. إذا قمت بالنقر فوق النص، أريد تحرير العنصر.

بدأت في استخدام شيء مثل هذا:

$("a").live("click", function(event){
  alert( $(this).text() );
});

لكنني لا أرى أي شيء بالدولار (هذا) أو "حدث" يمكنني تحديد ما إذا كنت النقر فوق النص أو الصورة.

نعم، أعرف أنني يمكن أن يكون لدي علامة "img" منفصلة ومتعامل مع النقر على ذلك بشكل منفصل. سأذهب هذا الطريق إذا كان هذا هو الخيار الوحيد. أريد فقط أن أعرف ما إذا كان هناك طريقة لجعلها تعمل على صورة الخلفية.

شكرا مقدما!

Answer 1

الذهاب مع علامة img. أفضل ما يمكنك القيام به يكتشف النقر على عنصر LI نفسه، والذي سينتهي به الأمر إلى فوضوي. ستعمل علامة IMG (وحتى علامة حولها للحصول على الخير الدلالي والصفحات المهينة بشكل جيد) بشكل أفضل.

لا يجب أن يكون لديك الكثير من المشكلات لتصميمه للبحث عن نفسه باستخدام IMG داخل LI، أفعل شيئا مشابها طوال الوقت داخل القوائم حيث أحتاج إلى حذف / تحرير الرموز.

Answer 2

لا يمكنك التمييز بنقرة واحدة على صورة الخلفية، حيث فيما يتعلق دوم، إنه ليس هناك بالفعل. كل ما لديك هو a ينطلق العنصر نفسه (يحدث أن يتم تقديمه باستخدام صورة الخلفية الخاصة بك)، ومعالجها OnClick الخاص به طالما قمت بالنقر فوق أي مكان داخل العلامة والنص أم لا.

ربما هو الأفضل لاستخدام img علامة (أو بعض العلامات المنفصلة الأخرى) والتعامل مع النقر على ذلك بشكل منفصل، كما انتهت في الكتابة الخاصة بك.

Answer 3

ما يمكنك فعله للتأثير المرغوب فيه هو وضع فترة مع بعض المساحات في المنطقة التي ستظهر فيها صورة حذف في النهاية، ثم ربط الحدث بنقرة تلك الفترة.

Answer 4

ضع عنصر فوقه، وسرقة تسجيل الحدث مع ذلك.