Question

我在WordPress中使用Woocommerce插件尝试将jQuery应用于管理订单页面的某些元素。除了.save-action选择器所需的代码之外，以下代码可以正常工作：

add_action( 'admin_head', 'woocommerce_admin_init' );
function woocommerce_admin_init() {
    $screen = get_current_screen();
    if ( $screen->post_type == "shop_order" ) {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".edit_address").click();
            $(".add-line-item").click();
            $(".save-action").on("click", function() {
                $(".calculate-action").click();
            });
            <?php
            if (!is_admin()) {
            ?>
            $("p.add-items span.tips").append(" - only admin can refund");
            $(".refund-items").hide();
            <?php } ?>
        });
    </script>
    <?php
    }
}

＆＃39;计算＆＃39;具有计算动作类的按钮被隐藏，而“保存”按钮被隐藏。显示保存操作类的按钮。在您单击添加行项目并显示保存按钮后，Woocommerce页面上已存在的Ajax隐藏计算按钮，然后在添加项目并单击保存按钮后，计算按钮将重新显示，允许您单击以计算总计页。我想使用jQuery在有人点击“保存”时单击“计算”按钮。

首次加载页面后，这样可行。当我单击“保存”时，“计算”按钮将触发，但它会一直循环触发，直到我单击“取消”。此外，在那之后，当我单击“保存”按钮时，它永远不会再次触发。有谁知道如何做到这一点？

希望这是有道理的。也许这里的jQuery人知道我在Woocommerce中谈论的订单页面，因为相关元素是动态的，所以很难粘贴。

以下是来自源代码的HTML，Calculate Totals按钮位于此div部分：

<div class="wc-order-data-row wc-order-bulk-actions" style="display: block;">
<p class="bulk-actions">
    <select>
        <option value="">Actions</option>
                        <optgroup label="Edit">
                <option value="delete">Delete selected line item(s)</option>
            </optgroup>
                    <optgroup label="Stock Actions">
            <option value="reduce_stock">Reduce line item stock</option>
            <option value="increase_stock">Increase line item stock</option>
        </optgroup>
    </select>

    <button type="button" class="button do_bulk_action wc-reload" title="Apply"><span>Apply</span></button>
</p>
<p class="add-items">
                <button type="button" class="button add-line-item">Add line item(s)</button>
                                                <button type="button" class="button button-primary calculate-tax-action">Calculate Taxes</button>
        <button type="button" class="button button-primary calculate-action">Calculate Total</button>
        </p>
</div>

并且“保存”按钮位于此div中，直到“添加”行项目＆＃39;单击上面div中的按钮，然后交换显示：无＆＃39;上面的div，反之亦然点击Save：

<div class="wc-order-data-row wc-order-add-item" style="display: none;">
<button type="button" class="button add-order-item">Add product(s)</button>
<button type="button" class="button add-order-fee">Add fee</button>
<button type="button" class="button add-order-shipping">Add shipping cost</button>
<button type="button" class="button cancel-action">Cancel</button>
<button type="button" class="button button-primary save-action">Save</button>
</div>

使jQuery持久化动态元素

0 个答案: