jQuery encima del ratón invocando un clic

Question

Nuevo para jQuery pero bastante fascinado con ella y realmente me encanta. Empezando a apagar, sin embargo, con este problema. Realmente agradecería cualquier ayuda. Pasado la última semana tratando de hacer cara o cruz fuera de él. Me disculpo si este problema se ha publicado antes.

Tengo una lista de productos. Cada producto está encerrado en una <div>. Dentro de cada div tiene un <span> flotado de información de producto y un <a> ir la URL apropiada del producto. Esta lista se genera mediante programación con ASP.NET.

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

Por desgracia, no tengo una URL como esto es sólo en una plataforma de desarrollo detrás de un firewall. El sitio más o menos se parece a la de abajo. Espero que esto ayude.

+----------+------------------------------+
|  #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.          |  |               |           |
|    :     |                              |  +---------------------------+
|          |                              |   
+----------+------------------------------+

La información de cada producto (incluyendo foto) se almacena en una base de datos.
Dependiendo de la acción del usuario en el lapso ( es decir prodInfo .), El proceso deseado es:

• vuelo estacionario se mostrará una pequeña ventana emergente con algo de información de productos y algunos detalles (por ejemplo, precios).
• en se mostrará (animado) una capa semitransparente y un
  que contiene toda la información sobre el producto, incluyendo la foto.

Tengo una imagen dentro del marco que cuando se hace clic, sería ocultar la superposición / marco.
Información (incluyendo la foto) se tira con jQuery Ajax $.get().
Usando jQuery, yo era capaz de lograr esto en la primera pasada (la primera en ). Sin embargo, después de cerrar "marco" y ocultar la superposición y, a continuación, vuelo estacionario a través de cualquier "prodInfo", se mostrará la pequeña ventana emergente como debe ser, pero al mismo tiempo también muestra la superposición y el "marco", como si invoqué una clic .

Este es el código jQuery simplificado para los dos eventos:

$(".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
  }
);

A continuación se muestra la definición de eventos de la imagen "cercana" que se encuentra dentro del marco.

$("#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;
  }
);

Como se ha mencionado, esto va a funcionar como estaba previsto solamente antes de la primera posición. Después de hacer clic en un prodInfo span y cierre el marco / superposición, el siguiente al pasar el ratón sobre un prodInfo que realmente invoca AMBOS encima del ratón y también un clic (que muestra la espalda de la superposición / marco ).

EDIT: Gracias a todos los que respondieron. Voy a tratar de depurarlo utilizando cada una de sus sugerencias.

EDIT (2): Mahalo para todos los que comentó y respondió.

Answer 1

No acabo de imagen completa de la configuración que tenga, pero este fue el primero que me vino a la mente. Puede ser que sea un caso de burbujeo de eventos, llevando el evento de clic a la vez el botón de cierre y la envergadura. Tal vez cuando hace clic en el evento de cierre, el lapso clic también puede disparar, pero el marco está siendo ocultado por el evento de cierre. Echa un vistazo a la función de enlace para obtener más información en la detención de la acción por defecto y evento de propagación: http: // jQuery .bassistance.de / api-browser / # bindStringObjectFunction

Como se mencionó Don, una URL de muestra sin duda ayudaría mucho!

Editar:

Tras un examen más, creo que es la forma en que está asociando el evento ajaxSuccess dentro del evento click (). Aún podría estar activo y el despido siempre que se haga cualquier solicitud Ajax.

Editar, de nuevo:

He acaba de confirmar esto con mi propia prueba del código y que sin duda parece ser el problema. De hecho, está adjuntando la función ajaxSuccess cada vez que haga clic, así que si has hecho clic cinco veces, se ejecuta esa función en cinco ocasiones. Desde una petición AJAX se hace en el caso de pasar el ratón, sino que también está disparando las funciones ajaxSuccess previamente fijados y que muestra la superposición y el marco.

Para evitar esto intente lo siguiente:

En lugar de:

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

    $(this).ajaxSuccess(

Probar:

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

    if ( statusText == 'success' ) {

Answer 2

Me voy a tomar una batea, y decir que el problema es que se genera / mostrar la ventana emergente en la primera mouseover / clic, y luego simplemente hacerlas opacas. En el segundo encima del ratón, parece que el viejo div se atrapó y se hace visible de nuevo.

Aparte de eso, si usted podría proporcionar una URL de enlace a la página donde usted tiene este problema, puedo tomar una mirada más profunda.

Answer 3

el problema podría ser que usted no está ocultando lo que fue creado en el clic cuando se hace pasar el ratón. Por lo tanto, cuando mouseover de nuevo, usted está mostrando la primera, pero ya que la primera tiene ahora el elemento evento click en ella, se nota también. Usted querrá ocultar el elemento evento click en mouseover, por lo que no se presenta así.