Why jquery design script is not working for the pr

问题:

I've got this problem that I can't solve. Partly because I can't explain it with the right terms. I'm new to this so sorry for this clumsy question.

Below you can see an overview of my goal.

I'm working with Magento CE 1.7.0.2.

Here you can see my goal..

for category products i wrote one custom design script in JQuery & its working perfectly.

Design Script :

<script>
$(document).ready(function(){ 
   $("li.item").each(function(){
      // my design script.
   });
});
</script>

I have one ajax script from that i'm displaying the some of products in this page at last this one also working fine but the script for design is not working for the products what are all the products got from ajax script.

ajax script :

$.ajax({
      url: url1,
      cache:  false ,
      type : 'POST',
      // dataType: "json",
      data: data1,
      success: function(response){
        if (response) {
          var string = $('.ajaxproducts', response);
          $('.displayproductsfromajax').html(string);
        }
      }
});

I want make that same design script for ajax script products also.

Any thing wrong i did here ?

Any ideas ?

回答1:

Problem is, you called the design script only on dom ready function. You need to call it again after ajax succeeded in order to apply the style or something.

function applyScript()
{
 $("li.item").each(function(){
  // my design script.
 });
}

$.ajax({
  url: url1,
  cache:  false ,
  type : 'POST',
  // dataType: "json",
  data: data1,
  success: function(response){
    if (response) {
      var string = $('.ajaxproducts', response);
      $('.displayproductsfromajax').html(string);
      applyScript()
    }
  }
});

回答2:

You have to be able to call your design algo on seperate collection so wrap it inside a function like this

var myDesign = function(i,el){
  // this will be a reference to the current li.item in "each"
};

$(document).ready(function(){ 
   $("li.item").each(myDesign);
});

...

$.ajax({
      url: url1,
      cache:  false ,
      type : 'POST',
      // dataType: "json",
      data: data1,
      success: function(response){
        if (response) {
          var string = $('.ajaxproducts', response);
          $('.displayproductsfromajax').html(string).find('li.item').each(myDesign);
        }
      }
});