انقر على DIV، ولكن تريد أن تتفاعل عناصر الأطفال للنقر

StackOverflow https://stackoverflow.com/questions/554817

  •  23-08-2019
  •  | 
  •  

سؤال

بلدي دوم يشبه هذا:

<div class="profile">
       <a href="#"><img src="/img1.gif" /></a> <b>100</b>
       <a href="#"><img src="/img2.gif" /></a>
</div>

حسنا، لدي العديد من هذه العناصر على صفحتي، لذلك باستخدام JQuery I Binded كل الأحداث مثل هذا:

$(".profile").live('click', myCallback);


var myCallback = function(event) {
         // ??
};

الآن، عندما ينقر شخص ما على الارتباط التشعبي الأول، أريد تغيير الصورة إلى "/img1_on.gif"، ثم قم بإجراء مكالمة AJAX إلى صفحة ويب واستبدال القيمة بين مع إرجاع القيمة.

يحدث نفس الشيء عندما يتم النقر فوق الصورة الأخرى، باستثناء تغييرات الصورة إلى "/img2_on.gif" وتذهب إلى عنوان URL آخر.

سيكون أسهل إذا قمت بتحويل في DIV وإضافة بعض CSS؟

لا يوجد حل صحيح

نصائح أخرى

$(".profile a").live("click", function(e) {
  var temp = $("img", this);
  var temp2 = temp.attr("src").split('.');

  temp.attr("src", temp2[0] + "_on" + temp2[1]);

  // Ajax goes here.

  e.preventDefault();
});

كان لديك ذلك بحيث كان Div هو النقر فوق، وليس الروابط داخل DIV. يجب أن تعمل هذه الوظيفة من أجلك، على افتراض أنك تملأ جزء AJAX.

أنا لست متأكدا تماما ما تطرحه، ولكن إذا كنت ترغب في العثور على العنصر الذي تسبب في حدث النقر، فيمكنك استخدام E.Target، ثم $ (e.target) من هناك. شيء من هذا القبيل.

$(".profile").live('click', function(e){
  if($(e.target).is("a"))
     $(e.target).find("img").attr("src","/new/url.jpg");
});

على سبيل المثال، حدد الروابط الفرعية فقط (هذه سيكون الرابط):

$(".profile > a")

للصور (هذه ستكون الصورة لمعالجة):

$(".profile > a > img").live("click", function(event) {
    var src = $(this).attr("src");
    $(this).attr("src", src.replace(".gif", "_on.gif"));
    // ajax call in any way you prefer
    // in callback you can switch button state back
});

ستجد هذا بريد توضح بالضبط ما هو أمر الحدث وماذا يعني الاستماع إلى حدث أثناء المرحلة الالتقاط أو الفقاعات ومتى يلغي نشر الأحداث الإضافية.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top