jQuery 鼠标悬停调用单击

Question

刚接触 jQuery，但对它非常着迷并且非常喜欢它。然而，这个问题开始让我失去兴趣。非常感谢任何帮助。上周花了一周的时间试图弄清楚这一点。如果之前已经发布过此问题，我深表歉意。

我有一个产品列表。每个产品都包含在 <div> 中。每个div里面都有一个 float 的<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)的操作，所需的过程是:

• 悬停将显示一个小弹出窗口，其中包含一些产品信息和一些详细信息(例如价格)。
• 点击将显示(动画)半透明叠加层和包含有关产品(包括照片)的所有信息的
  。

我在框架内有一个图像，单击该图像时，将隐藏覆盖层/框架。
使用 jQuery Ajax 提取信息(包括照片)$.get() .
使用 jQuery，我能够在第一遍(第一次点击)上实现这一目标。但是，当我关闭“frame”并隐藏覆盖层，然后将鼠标悬停在任何“prodInfo”上时，它会按应有的方式显示小弹出窗口，但同时也会显示覆盖层和“框架”就像我调用了点击一样。

这是两个事件的简化 jQuery 代码:

$(".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 上的下一次鼠标悬停实际上会调用鼠标悬停和单击(显示回覆盖层/框架)。

编辑: 感谢所有回复的人。我将尝试使用您的每条建议来调试它。

编辑(2): Mahalo 感谢所有评论和回复的人。

Answer 1

我无法完全想象你的整个设置，但这是我首先想到的事情。这可能是事件冒泡的情况，将单击事件携带到关闭按钮和跨度。也许当您单击关闭事件时，跨度单击也可能会触发，但框架被关闭事件隐藏。查看绑定(bind)函数以获取有关停止默认操作和事件冒泡的更多信息:http://jquery.bassistance.de/api-browser/#bindStringObjectFunction

正如 Don 提到的，示例 URL 肯定会有很大帮助!

编辑:

经过进一步检查，我认为这是您在 click() 事件中附加 ajaxSuccess 事件的方式。每当发出任何 ajax 请求时，它可能仍然处于事件状态并触发。

再次编辑:

我刚刚通过自己的代码测试证实了这一点，这似乎确实是问题所在。事实上，每次单击时它都会附加 ajaxSuccess 函数，因此如果您单击了五次，它就会执行该函数五次。由于 AJAX 请求是在 mouseover 事件中发出的，因此它还会触发之前附加的 ajaxSuccess 函数并显示您的叠加层和框架。

要解决此问题，请尝试以下操作:

而不是:

    $.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' ) {