Question

jQuery的新手，但对它非常着迷并且非常喜欢它。但是，开始让我失望，这个问题。非常感谢任何帮助。在最后一周花了很多时间试图做出正面或反面。如果此问题已经发布，我道歉。

我有一份产品清单。每个产品都包含在<div>中。每个div中都有一个浮动的<span>用于产品信息，<a>用于显示产品的相应网址。此列表是使用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 ）的操作，所需的过程是：

悬停会显示一个小弹出窗口，其中包含一些产品信息和一些详细信息（例如价格）。
点击将显示（动画）半透明叠加层和＆lt; div id =“frame”＆gt;包含有关产品的所有信息，包括照片。

我在框架内有一个图像，当点击时，会隐藏叠加/框架使用jQuery Ajax $.get()提取信息（包括照片）使用jQuery，我能够在第一次传递（第一次点击）时实现这一点。但是，在我关闭“框架”并隐藏叠加层，然后悬停覆盖任何“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 上的下一次鼠标悬停实际上会调用鼠标悬停，并且还会单击（显示回来）覆盖/框架。

编辑：感谢所有回复的人。我将尝试使用您的每个建议进行调试。

EDIT（2）： Mahalo 给所有评论和回复的人。

Answer 1

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

正如唐所提到的，示例网址肯定会有很多帮助！

编辑：

经过进一步检查，我认为这是你在click（）事件中附加ajaxSuccess事件的方式。无论何时发出任何ajax请求，它都可能仍处于活动状态并触发。

再次编辑：

我刚用自己的代码测试证实了这一点，但这似乎确实是个问题。实际上，每次单击时它都会附加ajaxSuccess函数，所以如果你点击了五次，它会执行五次该函数。由于在mouseover事件中发出了AJAX请求，因此它还会触发先前附加的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' ) {

Answer 2

我要采取一个平底船，并说问题是你在第一次鼠标悬停/点击时生成/显示弹出窗口，然后只是渲染它不透明。在第二次鼠标悬停时，它看起来像旧的div被抓住并再次可见。

除此之外，如果您可以提供链接到您遇到此问题的网页的网址，我可以深入了解一下。

Answer 3

问题可能在于您在执行鼠标悬停时没有隐藏在点击上创建的内容。因此，当您再次使用鼠标悬停时，您将显示第一个，但由于第一个现在具有click事件项，因此它也会显示它。您将要在鼠标悬停时隐藏单击事件项，因此它也不会显示。

jQuery mouseover调用点击

3 个答案: