I'm having issue with load speed using multiple jQuery binds on a couple thousands elements and inputs, is there a more efficient way of doing this?
The site has
the ability to switch between product lists via ajax calls,
the page cannot refresh. Some lists have 10 items, some 100, some over 2000.
The issue of speed arises when I start flipping between
the lists; each time
the 2000+ item list is loaded
the system drags for about 10 seconds.
Before I rebuild
the list I am setting
the target element's html to '', and unbinding
the two bindings below. I'm sure it has something to do with all
the parent, next, and child calls I am doing in
the callbacks. Any help is much appreciated.
loop 2500 times
<ul>
<li><input type="text" class="product-code" /></li>
<li>PROD-CODE</li>
...
<li>PRICE</li>
</ul>
end loop
$('li.product-code').bind( 'click', function(event){
selector = '#p-'+ $(this).prev('li').children('input').attr('lm');
$(selector).val(
( $(selector).val() == '' ? 1 : ( parseFloat( $(selector).val() ) + 1 ) )
);
Remote.Cart.lastProduct = selector;
Remote.Cart.Products.Push(
Remote.Cart.customerKey,
{
code : $(this).prev('li').children('input').attr('code'),
title : $(this).next('li').html(),
quantity : $('#p-'+ $(this).prev('li').children('input').attr('lm') ).val(),
price : $(this).prev('li').children('input').attr('price'),
weight : $(this).prev('li').children('input').attr('weight'),
taxable : $(this).prev('li').children('input').attr('taxable'),
productId : $(this).prev('li').children('input').attr('productId'),
links : $(this).prev('li').children('input').attr('productLinks')
},
'#p-'+ $(this).prev('li').children('input').attr('lm'),
false,
( parseFloat($(selector).val()) - 1 )
);
return false;
});
$('input.product-qty').bind( 'keyup', function(){
Remote.Cart.lastProduct = '#p-'+ $(this).attr('lm');
Remote.Cart.Products.Push(
Remote.Cart.customerKey,
{
code : $(this).attr('code') ,
title : $(this).parent().next('li').next('li').html(),
quantity : $(this).val(),
price : $(this).attr('price'),
weight : $(this).attr('weight'),
taxable : $(this).attr('taxable'),
productId : $(this).attr('productId'),
links : $(this).attr('productLinks')
},
'#p-'+ $(this).attr('lm'),
false,
previousValue
);
});
