jQuery - How to trigger an event after reload - ONLY ONCE

Question

So this is what I am trying to do - I want everytime the user selects a different option at the 'select', a different function would be activated. Each 'selected:option' has a different function. It might be easier to understand with the following code:

$('.edd-variable-pricing-switcher').change(function() {
        if($(this).val() == 1) {
            $('.chackout-licence-private').css('display', 'block');
        }
        else {
            $('.chackout-licence-private').css('display', 'none');
        }

    if(e.originalEvent) {
        window.location.reload(true);
    }
}).change();

Now it works, when I choose the option with the value '1' in my select (select class=".edd-variable-pricing-switcher"), I have the div with the class ".chackout-licence-private" displayed block. My problem is - The page never stop to reloads itself. as I trigger the change event at the end, it causes an endless page reload, but without triggering the change event, after the page reloads the changes wouldn't exist anymore.

The solution I am trying to look for, is how can I trigger the change event after the page reloads only once, so the page won't keep reloading in sort of a loop.

Thanks

EDIT

I am adding some of the code.. 1. This is the html I'm trying affect and display (normally it is display:none):

<div class="chackout-licence">
    <div class="chackout-licence-private">
        <h3>Private Licence</h3>
            <p>
            A single track licence for online entertainment video....
            </p>
  </div><!--chackout-licence-private-->

2. The select and the option code part is from a plugin, so I'm adding an image from the inspect element:

3. explanation: I am trying to create a variable pricing for a product, so at the checkout the user would be able to decide with which licence he will buy the product. so he chooses an option from the select, and than each option displays a different description about each licence.

Answer 1

how can I trigger the change event after the page reloads only once, so the page won't keep reloading in sort of a loop

[EDIT] I think this one would work:

jQuery( function( $ ) {
    /**
     * Hides (default) or shows an element.
     *
     * @param s    mixed A DOM selector. E.g. .my-class or #my-unique-id
     * @param show bool  If TRUE, shows the element. Otherwise, hides it.
     * @return object The target element.
     */
    function toggleDisplay( s, show ) {
        if ( show ) {
            return $( s ).show();
        } else {
            return $( s ).hide();
        }
    }

    /*
     * You may also instead target the SELECT's "name" value. I.e.
     * $( 'select[name="edd-variable-pricing-switcher[60]"]' )
     */
    $( 'select.edd-variable-pricing-switcher' ).each( function() {
        // Saves the default value. (on-page cache)
        $( this ).data( '_defaultValue', this.value );

        // When the value changes, reloads the page.
        $( this ).on( 'change', function() {
            var _defaultValue = $( this ).data( '_defaultValue' );

            // Invalid value.
            if ( ! this.value ) {
                // Hides .chackout-licence-private
                toggleDisplay( '.chackout-licence-private' );
            }
            // It's the default value. ("no" changes)
            else if ( this.value === _defaultValue ) {
                /*
                 * Shows .chackout-licence-private, if value is 1; otherwise,
                 * hides it.
                 */
                toggleDisplay( '.chackout-licence-private', '1' === this.value );
            }
            // It's a valid new value.
            else {
                // The TRUE below - are you 100% sure you want to force reload?
                window.location.reload( true );
            }
        } );

        /*
         * When the page loads (i.e. first load or after a reload), shows/hides
         * the appropriate DIV. In this case, we show .chackout-licence-private
         * if value is 1; otherwise, hides it.
         */
        toggleDisplay( '.chackout-licence-private', '1' === this.value );
    } );
} );

Answer 2

Well you are tracking a change event, doing something in that function but right after you are triggering the change event again.

$('.edd-variable-pricing-switcher').change(function() { ... }).change(); is your code. The last .change() triggers another change, hence repeating itself.

Simply remove the last .change() like so

$('.edd-variable-pricing-switcher').change(function() {...});