Jump to content

jquery stop working after filtering product


polykodesas

Recommended Posts

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

 

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...