مسج Mouseover استدعاء نقرة

Question

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

لدي قائمة بالمنتجات. يتم إرفاق كل منتج في <div>. وبعد داخل كل فح لديه طرحت <span> للحصول على معلومات المنتج و <a> للذهاب عنوان URL المناسب للمنتج. يتم إنشاء هذه القائمة برمجيا باستخدام ASP.NET.

<div id="prod1">
   <span id="infoProd1" class="prodInfo" />
   <a class="prodURL" href="url1">Name of product #1</a>
</div>
   :
   :

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

+----------+------------------------------+
|  #prod1  |                              |
+----------+                              |   Each #prodNum div looks like:
|  #prod2  |    overlay and frame divs    |
+----------+       appear over here       |  +-- #prod1 -----------------+
|  #prod3  |     with product details     |  |               |           |
+----------+       only if .prodInfo      |  |  .prodURL     | .prodInfo | 
|          |         is clicked.          |  |               |           |
|    :     |                              |  +---------------------------+
|          |                              |   
+----------+------------------------------+

يتم تخزين المعلومات لكل منتج (بما في ذلك الصورة) في قاعدة بيانات.
اعتمادا على عمل المستخدم في الفترة (أي prodinfo.)، العملية المطلوبة هي:

• يحوم سيعرض منبثق صغير مع بعض معلومات المنتج وبعض التفاصيل (مثل السعر).
• انقر سوف تظهر (تحريك) تراكب شبه شفافة وu003Cdiv id="frame" style=";text-align:right;direction:rtl"> تحتوي على جميع المعلومات المتعلقة بالمنتج، بما في ذلك الصورة.

لدي صورة داخل الإطار الذي عند النقر عليه، سيخفه التراكب / الإطار.
يتم سحب المعلومات (بما في ذلك الصورة) باستخدام JQuery Ajax $.get().
باستخدام jQuery، كنت قادرا على تحقيق ذلك على المرور الأول (الأول انقر). ومع ذلك، بعد إغلاق "الإطار" وإخفاء التراكب، ثم يحوم على أي "prodinfo"، سوف يعرض المنبثقة الصغيرة كما يجب أن يكون ولكن في نفس الوقت يعرض أيضا التراكب "الإطار" كما لو استدعت انقر.

فيما يلي رمز مسج مبسط للمناسمين:

$(".prodInfo").mouseover(
  function(e) {   // function fired when 'moused over'
    var popupItem = $("#div_infoPopupItem");  // absolute positioned popup
    var prod = $(this).attr('id');
    var prd;

    popupInit(popupItem, e); // changes the top/left coords

    $.ajax({            
      type    : 'GET',
      url     : 'prodInfo.aspx',
      data    : 'id=' + prod,
      success :

        function(prodInfo, status) {
          var prodStr = '<b>No product name.</b>';

          prd = prodInfo.split('::');  // product info delimited by '::'
          prodStr = '<div class="popupInfo_head">' + prd[0] + '</div>' +
                    '<div style="margin:2px;">' + prd[1] + '</div>';
                    // and so on...

          popupItem.html(prodStr);
          return false;
        },
    error :
      function() {
        popupItem.html('Error in collecting information.');
      }
    });

    popupItem.animate({ opacity : .94 }, { queue:false, duration: 120 });
    return false;
  }
);

$(".prodInfo").click(
  function(e) {
    var prod    = $(this).attr('id');
    var frame   = $("#div_frame");
    var overlay = $("#div_overlay");
    var info;
    var img     = new Image();

    document.getElementById('div_frame').scrollTop = 0;
    $.get('prodInfo.aspx', { id: prod },
      function (result) {
        info = result.split(';;');     // name ;; status ;; description ;; price, etc.

        $(this).ajaxSuccess(
          function (e, request, settings) {
            img.src = 'prodImage.aspx?id=' + prod;
            img.id  = 'prodImg';

            //populate the frame with prod info
            $(img).load(function () {
              $("#prodInfoImage")
                  .css('background', 'transparent url("prodImage.aspx?id=' + prod + '") no-repeat 50% 50%');
              switch (info[1]) {
                case '0':
                    $("#prodStatus")
                        .removeAttr("class")
                        .addClass("status_notavail")
                        .text('Not available');
                        break;
                case '1':
                    $("#prodStatus")
                        .removeAttr("class")
                        .addClass("status_avail")
                        .text('Available');
                        break;
              } // switch

              $("#prodInfoDesc")
                  .empty()
                  .append(info[2]);
              $("#prodInfoExtra")
                  .empty()
                  .append(info[3]);

              $("#prodName").text(info[0]);
            }
          )
          .error(
            function() {
              return false;
            }
          );  // image load

          // animate overlay, frame and display product info
          overlay .animate({ top   : '0' }, { queue: false, duration: 280 })
                  .animate({ height: '100%' }, 280, '',
                    function() {
                      frame.animate({ opacity : .92 }, 320);
                      return false;
                    }
                  );
          return false;
          }
        );     // ajax success
      }
    );  // get
  }
);

فيما يلي هو تعريف الحدث لصورة "إغلاق" الموجودة داخل الإطار.

$("#img_close").click(
  function (e) {
    $("#div_frame")
      .animate({ opacity: 0}, 100, '', 
        function() {
          $("#div_overlay")
            .animate({ top   : "50%" }, { queue: false, duration: 120 })
            .animate({ height: "0px" }, 120);
        }
      );

      return false;
  }
);

كما ذكر، سيعمل هذا كما هو مخطط فقط قبل النقر الأول. بعد أن أضغط على prodinfo. span وإغلاق الإطار / التراكب، الماوس التالي على prodinfo. في الواقع يستدعي كلا من Mouseover وأيضا نقرة (التي تظهر مرة أخرى التراكب / الإطار).

تحرير: شكرا لجميع الذين استجابوا. سأحاول تصحيح ذلك باستخدام كل من اقتراحاتكم.

تحرير (2):ماهالو لكل من علق ويستجيب.

Answer 1

لا أستطيع أن أتصور تماما الإعداد بأكمله، لكن هذا كان أول ما برزت إلى الذهن. قد تكون حالة فقاعة الأحداث، وتحمل الحدث Click إلى كل من الزر الإغلاق والمباراة. ربما عند النقر فوق الحدث الإغلاق، قد تطلق النقر فوق SPAN أيضا، ولكن يتم إخفاء الإطار بحدث إغلاق. تحقق من وظيفة BIND لمزيد من المعلومات حول إيقاف الإجراءات الافتراضية والفقاعات الحدث: http://jquery.bassistance.de/api-browser/#bindstringObjectFunction.

كما ذكر دون، فإن عنوان URL عينة يساعد بالتأكيد كثيرا!

يحرر:

عند إجراء مزيد من الفحص، أعتقد أنه بالطريقة التي تعلق بها حدث AJAXSUCCESS ضمن حدث Click (). قد لا تزال نشطة وإطلاق النار كلما تم تقديم أي طلب أجاكس.

تحرير، مرة أخرى:

لقد أكدت هذا فقط من خلال اختباري الخاص بالقانون، وبالتأكيد يبدو أن المشكلة. في الواقع، يقوم بإرفاق وظيفة AJAXSUCCESS في كل مرة تنقر عليها، لذلك إذا قمت بالنقر فوق خمس مرات، فإنه ينفذ هذه الوظيفة خمس مرات. نظرا لأن طلب Ajax مصنوع في حدث Mouseover، فإنه يطلق أيضا وظائف AJAXSCCCESS المرفقة مسبقا وإظهار تراكب وإطارك.

للحصول على هذا جرب ما يلي:

بدلا من:

    $.get('prodInfo.aspx', { id: prod },
  function (result) {
    info = result.split(';;');     // name ;; status ;; description ;; price, etc.

    $(this).ajaxSuccess(

يحاول:

    $.get('prodInfo.aspx', { id: prod },
  function (result, statusText) {
    info = result.split(';;');     // name ;; status ;; description ;; price, etc.

    if ( statusText == 'success' ) {

Answer 2

سألتقي بنسخة، وتقول إن المشكلة هي أن تقوم بتوليد / إظهار المنبثقة على أول ماوسوفر / انقر، ثم أعد فحسب. في الفأرة الثانية، يبدو أن DIV القديم يجري القبض عليه وصنع مرئيا مرة أخرى.

بخلاف ذلك، إذا كان بإمكانك تقديم عنوان URL يربط بالصفحة حيث لديك هذه المشكلة، فيمكنني أن أتناول مظهر أعمق.

Answer 3

قد تكون المشكلة هي أنك لا تخفي ما تم إنشاؤه بنقرة النقر عند قيامك بالفيديو. لذلك، عند الماوس مرة أخرى، تقوم بإظهار الأول، ولكن نظرا لأن الأول يحتوي الآن على عنصر الحدث انقر فوقه، فهذا يظهر ذلك أيضا. سترغب في إخفاء عنصر الحدث Click على Mouseover، لذلك لا يظهر كذلك.