JavaScript alerta de devolución de llamada que no funciona dentro de una función -- javascript campo con jquery campo con css camp Relacionados El problema

JavaScript alert callback not working inside a function


0
vote

problema

Español

Estoy tratando de hacer una vista previa de imagen que contiene aproximadamente 5-6 imágenes que aparecerán una tras otra cuando el usuario se cierne sobre él (no como un carrusel con prevntes y los botones siguientes). Aquí está la Fiddle que consiste en lo que reuní hasta ahora .. No sé si este enfoque es Justo o no .. Pero estoy atascado ya que la devolución de llamada alerta no funciona. ¿Podría alguien decirme qué está mal?

  Source8  
Original en ingles

I am trying to make a image preview containing of about 5-6 images which will appear one after another when user hovers over it (not like a carousel with prev and next buttons). Here is the fiddle consisting of what I gathered so far.. i don't know if this approach is right or not.. but I am stuck as the alert callback is not working. Could someone please tell me what is wrong?

$(function()    {       var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');        for (var i = 0, n = imageCount.length; i < n; i++) {           imageCount[i].on('click', function(e)                {                   alert('Everything is going fine!');               }                     );       }   } ); 
        
   
   

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

La causa raíz de la devolución de llamada de evento de click no se puede activar es que está intentando registrar un controlador de eventos en un elemento "DOM" (en este caso: ImageCount [I] ImageCount [I] ) elemento en JQUERY WAY. Trate de registrar el manejador de eventos como este Si desea utilizar la solución Pure Javascript:

    var src = new Source();   src.Obj1 = 1;   src.Obj2 = 2;   src.Obj3 = 3;   var dst  = Mapper.Map<Destination>(src); 2  

Aquí hay una jsfiddle demo .

NOTA: No consideré el problema de la cruz del navegador en este caso.

BTW, intente almacenar en caché la longitud de la lista de nodos ImageCount, mejorará el rendimiento.

 

The root cause of click event callback can't be triggered is that you're trying to register a event handler on a "DOM" (in this case: imageCount[i]) element in jQuery way. Try to register the event handler like this if you want to use pure javascript solution:

imageCount[i].addEventListener('click', function(e){     alert('Everything is going fine!'); }); 

Here is a jsfiddle demo.

Note: I didn't consider the cross browser issue in this case.

BTW, try to cache the length of imageCount node list, it will improve the performance.

 
 
   
   
1
 
vote

Usted está utilizando JS y JQERY al mismo tiempo. Está incorrecto. Si usa jQuery, que var src = new Source(); src.Obj1 = 1; src.Obj2 = 2; src.Obj3 = 3; var dst = Mapper.Map<Destination>(src); 3. será así:

    var src = new Source();   src.Obj1 = 1;   src.Obj2 = 2;   src.Obj3 = 3;   var dst  = Mapper.Map<Destination>(src); 4  
 

You are using js AND jQuery at same time. It's wrong. If you use jQuery, than click event will be like this:

$(document).('click', '#product_grid_list figure img', function(){      alert('Everything is going fine!'); }); 
 
 
1
 
vote

Está utilizando una mezcla de jQuery y Javascript independiente. Usted también puede ir hasta jQuery, con algo así:

  $('#product_grid_list figure:first img').click(function(e) {       alert('Everything is going fine, hopefully!');    });   

No envió el HTML correspondiente, por lo que no podemos probar si lo anterior es correcto.

 

You are using a mix of jQuery and standalone javascript. You might as well go all the way to jQuery, with something like:

$('#product_grid_list figure:first img').click(function(e) {       alert('Everything is going fine, hopefully!');    }); 

You did not send the corresponding HTML, so we cannot test whether the above is correct.

 
 
1
 
vote

Es solo un evento de clic simple en jQuery, no es necesario usar JS: http://jsfiddle.net/ wp3qq / 11 /

  $('#product_grid_list').find('figure img').click(function(e){     alert('Everything is going fine!');     e.preventDefault();     });   
 

it's just a simple click event in jQuery, no need to use js: http://jsfiddle.net/wP3QQ/11/

$('#product_grid_list').find('figure img').click(function(e){     alert('Everything is going fine!');     e.preventDefault();     }); 
 
 
1
 
vote

Usted desea que el efecto Hover, así que haga clic en el evento no debe usarse aquí. Debería ser mousever.

Fiddle de trabajo

SNIPPET DE CÓDIGO:

  $(document).on('mouseover','#product_grid_list  figure  img',function(e){       alert("now it is working"); });   
 

You want the hover effect, so click event should not be used over here. It should be mouseover.

Working Fiddle

Code Snippet:

$(document).on('mouseover','#product_grid_list  figure  img',function(e){       alert("now it is working"); }); 
 
 
1
 
vote

Está intentando llamar on() , un método de jQuery, en un HTMLElement (un elemento DOM). No puedes hacer eso, los métodos de jQuery solo se pueden llamar a las colecciones de jquery. Es fácil obtener una colección de jQuery para los elementos que desea:

  • Uso .find() para que coincida con las imágenes
  • No hay necesidad de un Loop for()6 , JQERY's .on() manejará el bucle para usted.
  • También puede evitar el comportamiento predeterminado de sus anclajes

  $(function () {     var imageCount = $('#product_grid_list').find('figure img');     imageCount.on('click', function (e) {         e.preventDefault()         alert('Everything is going fine!');     }) });   

jsfiddle

 

You are attempting to call on(), a jQuery method, on an HTMLElement (a DOM element). You can't do that, jQuery methods can only be called on jQuery collections. It's easy to get a jQuery collection for the elements you desire:

  • Use .find() to match the images
  • There's no need for a for() loop, jQuery's .on() will handle looping for you.
  • You may also want to prevent the default behaviour of your anchors

$(function () {     var imageCount = $('#product_grid_list').find('figure img');     imageCount.on('click', function (e) {         e.preventDefault()         alert('Everything is going fine!');     }) }); 

JSFiddle

 
 

Relacionados problema

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos