jquery stop working after filtering product

[polykodesas]

Hi guys,

 

I made for my shop a custom product-list.tpl, who display product in a simplified list. In order to do that, I use a Jquery script who show product's picture on mouse over.

 

Here is a exemple: http://ingedus.polyk...roller=category

 

Everything is working fine util i use the filtering or sorting tools :-/

 

here is my JS code:

    $(document).ready(function()
        {

        $(".product_image_link").mouseover(function( evt )
{
var target_image_id = "#image_product_" + $(this).data('product-id');
var div_position = $(this).offset();

var image_position_left = parseFloat(div_position.left) + 50;
var image_position_top = parseFloat(div_position.top) - parseFloat( $(target_image_id).height());

$(target_image_id).css({display : 'block',
left : image_position_left,
top : image_position_top});
});



$(".product_image_link").mouseout(function( evt )
{
$(".product_image").css("display","none");
});

        });

This script simply show or hide a div (hide by default) containing product's picture

 

I fist believed on a binding issue, so i tried to use $('.ma_classe').on('mon_event',.... function, but no success

 

FYI the script is locate in my template's  (prestabrain mixtore) custom JS section.

 

I'm wondering if someone have an idea to fix it?

 

Regards 

 

Sébastien

 

 

[razaro]

Your store is in maintenance mode so bit hard to check that out.

[polykodesas]

Your store is in maintenance mode so bit hard to check that out.

 

Woops, you're right, sorry, I just removed it

[razaro]

Try with this code

$(document).ready(function()
{
	$(document).on("mouseover", ".product_image_link", function() {
	var target_image_id = "#image_product_" + $(this).data('product-id');
	var div_position = $(this).offset();

	var image_position_left = parseFloat(div_position.left) + 50;
	var image_position_top = parseFloat(div_position.top) - parseFloat( $(target_image_id).height());

	$(target_image_id).css({display : 'block',
	left : image_position_left,
	top : image_position_top});

	});

	$(document).on("mouseout", ".product_image_link", function() {
		$(".product_image").css("display","none");
	});

});

should work. 

[vekia]

your website loads loads and finally die

i can't access to page due to this

some other problems?

[polykodesas]

your website loads loads and finally die

i can't access to page due to this

some other problems?

 

When i known this server is amazingly slow but i manage to show the site (with time).

 

Where are you located ?

[polykodesas]

Hey,

 

I solved it by replacing

 

$(".my_selector").my_event(function( evt )

 

by

 

$(document).on('my_event', '. my_selector', function(evt)

 

when i tried with this function, I used $(body). instead of $(document).

 

Regards.

 

Sébastien