加载窗口上的jQuery

Question

I have a javascript code, the javascript code is for make font and color preview. So you can choose the font for example Arial and the Color for example red, the code will change a input box with what you select. This selection are automated saved and send it to cart, in the cart I have a button to edit your changes, my problem is here when I press that edit button and I am back at my selections I can't see the preview. For example after I press the edit button, the font must be Arial and the color must be red. I think the jquery is not executed when I return. Is there anyway to solve this?

This is the jQuery code:

jQuery(document).ready(function() {
  jQuery(".product-options dd .font select").change(function() {
    var str = jQuery(this).find("option:selected").text();
    jQuery(".product-options dd input.input-text").css("font-family", str);
  });
  jQuery(".product-options dd .color select").change(function() {
    var str = jQuery(this).find("option:selected").text();
    jQuery(".product-options dd input.input-text").css("color", str);
  });
});

Answer 1

So you want to call the same code on page load. triggerHandler() is your friend in this case. See below:

jQuery(document).ready(function() {
  jQuery(".product-options dd .font select").change(function() {
    var str = jQuery(this).find("option:selected").text();
    jQuery(".product-options dd input.input-text").css("font-family", str);
  });
  jQuery(".product-options dd .color select").change(function() {
    var str = jQuery(this).find("option:selected").text();
    jQuery(".product-options dd input.input-text").css("color", str);
  });

  // add these two lines:
  jQuery(".product-options dd .font select").triggerHandler('change');
  jQuery(".product-options dd .color select").triggerHandler('change');
});