【问题标题】:jQuery - How to trigger an event after reload - ONLY ONCEjQuery - 重新加载后如何触发事件 - 仅一次
【发布时间】:2018-08-04 17:57:16
【问题描述】:

所以这就是我想要做的 - 我希望每次用户在“选择”处选择不同的选项时,都会激活不同的功能。每个 'selected:option' 都有不同的功能。 使用以下代码可能更容易理解:

$('.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();

现在它可以工作了,当我在我的选择中选择值为“1”的选项时(选择 class=".edd-variable-pricing-switcher"),我的 div 的类为“.chackout-licence-私人”显示块。 我的问题是 - 页面永远不会停止重新加载。当我在最后触发更改事件时,它会导致无休止的页面重新加载,但在不触发更改事件的情况下,页面重新加载后更改将不再存在。

我正在寻找的解决方案是,如何在页面仅重新加载一次后触发更改事件,这样页面就不会以某种循环的方式继续重新加载。

谢谢

编辑

我正在添加一些代码.. 1.这是我正在尝试影响和显示的html(通常是显示:无):

<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-->
  1. 选择和选项代码部分来自插件,因此我从检查元素添加图像:

  2. 说明:我正在尝试为产品创建可变定价,因此在结账时用户将能够决定他将使用哪个许可证购买产品。所以他从选择中选择一个选项,然后每个选项显示关于每个许可证的不同描述。

【问题讨论】:

  • 提示:使用 cookie 或 HTML 5 存储来跟踪以前的活动
  • $(function({ $('.edd-variable-pricing-switcher').trigger('change')}))

标签: jquery html wordpress onchange reload


【解决方案1】:

您正在跟踪更改事件,在该函数中执行某些操作,但在您再次触发更改事件之后。

$('.edd-variable-pricing-switcher').change(function() { ... }).change(); 是您的代码。最后一个.change() 触发另一个更改,因此会重复。

像这样删除最后一个.change()

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

【讨论】:

  • 感谢您的回答。我再次触发更改事件,因此在页面重新加载后该功能仍然有效。如果我删除最后一个更改,页面只会重新加载一次,是的,但它不会保存更改所做的功能
【解决方案2】:

如何在页面仅重新加载一次后触发更改事件, 所以页面不会像循环一样不断地重新加载

[编辑] 我认为这个可行:

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 );
    } );
} );

【讨论】:

  • 您好,谢谢您的回答。它仍然对我不起作用。页面会不停地重新加载。
  • 这里还是有问题,想不通。页面会自动重新加载..
  • 好的。我已经编辑了这个问题。希望它会有所帮助。现在发生的情况是,无论值是什么,页面都会自行重新加载。
  • 感谢您的更新。因此,例如,如果我选择“The Bird | one - $10.00”,页面将重新加载,并且有一个 PHP 代码/函数将应用选择,而无需实际提交表单? (希望你能理解我的问题..)
  • 如果用户选择值为 '1' 的选项,他的 'chackout-licence-private' DIV 将可见。如果用户选择了不同的选项,将会有一个不同的 div 可见。我看到了 jsfiddle 示例,这就是我最终想要的,但正如我之前所说,在用户选择其中一个选项后,js 代码工作得很好,但页面会自行重新加载,重新加载后 js 代码赢了不再有效。所以我需要找到一种方法让新的可见 DIV 在页面重新加载后保持可见。希望现在更容易理解。
猜你喜欢
  • 1970-01-01
  • 2013-07-18
  • 2023-04-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多