I seem to have a structuring problem (Shopify theme using jQuery) with a jQuery script I set up to run on load, and I'm having trouble resolving it to persist on change. I have a dropdown that shows an appended message in the options when loaded:
window.addEventListener('load', function() {
{% for variant in product.variants %}
$(".tt-wrapper .form-default .form-group .form-control option").each(function(){
{% if variant.inventory_quantity > 0 %}
if ($(this).val() == '{{ variant.title }}') {
$(this).append('<p> (wait less)</p>');
}
{% else %}
if($(this).val() == '{{ variant.title }}') {
$(this).append('<p> (wait more) </p>');
}
{% endif %}
{% endfor %}
})
})
The problem is that when it is changed to another option, the appended changes go away. I used jQuery multiple events to trigger the same function as a guide to go towards fixing this, but the structure seems to cancel out the jQuery for this altogether.
$(".tt-wrapper .form-default .form-group .form-control option").change(function(e) {
e.preventDefault();
})
While I know this isn't working due to being scoped inside the 'load' event, I'm having a lot of trouble working out how to manage persistence in this context - jQuery does not seem to recognize the event I'm trying to pass in, and restructuring the original just kills off the original append, which is what I'l trying to preserve in the first place.
