javascript - jquery 两次触发 2 个类名实例，但仅单击 1 次

Question

我的 wordpress 插件中有一个 jquery 函数来加载资产库，在页面中加载所选资产并将 URL 添加到隐藏的输入中。

jQuery(document).ready(function($){
    
    
    var mediaUploader;
    $('.upload_cta_sample, .upload_cta_gift').click(function(e) {
        let hiddenField = $(this).data('cta');
        console.log(hiddenField);
        e.preventDefault();
        if (mediaUploader) {
            mediaUploader.open();
            return;
        }
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            }, multiple: false });
            mediaUploader.on('select', function() {
                var attachment = mediaUploader.state().get('selection').first().toJSON();
                $('img[data-img="'+hiddenField+'"]').attr('src', attachment.url).show();
                $('#'+hiddenField).val(attachment.url);
            });
                mediaUploader.open();
    });    
});
    

构建 UI 的 html/php 如下所示，

<?php
/**
 * Provide an admin area view for the plugin
 *
 * This file is used to markup the admin-facing aspects of the plugin
 *
 */
?>
<style>
    .gifts-at-checkout-radio { display:block; }
</style>
<div class="wrap">
    <div id="icon-themes" class="icon32"></div>
    <h2>Gifts At Checkout</h2>
    <?php settings_errors(); ?>

    <form method="POST" action="options.php">
        <?php settings_fields( 'gifts-at-checkout-settings-group' ); ?>
        <?php do_settings_sections( 'gifts-at-checkout-settings-group' ); ?>
        <h2>Free Samples</h2>
        <table class="form-table">
            <tr valign="top">
                <td valign="top">
                    <label for="free_samples_cat">Select your free samples product category:</label>
                </td>
                <td valign="top">
                <?php
                    $cat_args = array(
                        'orderby' => 'name',
                        'order' => 'ASC'
                    );
                    $categories = get_terms('product_cat', $cat_args);
                ?>
                    <select name="free_samples_category">
                        <?php foreach($categories as $category) : ?>
                            <option value="<?php echo $category->term_id; ?>" <?php if(get_option('free_samples_category') == $category->term_id){ echo "selected "; } ?>><?php echo esc_attr($category->name);?></option>
                        <?php endforeach; ?>
                    </select>
                </td>
            </tr>
            <tr valign="top">
                <td valign="top">
                    <label for="free_samples_cat">How many free samples can be added per transaction:</label>
                </td>
                <td valign="top">
                    <input type="text" value="<?php echo esc_attr(get_option('free_samples_threshold')); ?>" name="free_samples_threshold" />
                </td>
            </tr>
            <tr>
            <td>
                <img src="<?php echo esc_attr(get_option('free_samples_cta')); ?>" alt="free samples call to action image" <?php if(get_option('free_samples_cta') == "") { ?> style="display:none;" <?php } ?> data-img="free_samples_cta" />
                <input id="free_samples_cta" type="hidden" name="free_samples_cta" value="<?php echo esc_attr(get_option('free_samples_cta')); ?>" />
                <input class="upload_cta_sample button-primary" type="button" value="Free Samples CTA Image" data-cta="free_samples_cta" />
            </td>
            </tr>
            <tr>
                <td><?php submit_button(); ?></td>
            </tr>  
        </table>
        <h2>Gifts</h2>
        <table class="form-table">
            <tr valign="top">
                <td valign="top">
                    <label for="free_samples_cat">Select your gifts product category:</label>
                </td>
                <td valign="top">
                <?php
                    $cat_args = array(
                        'orderby' => 'name',
                        'order' => 'ASC'
                    );
                    $categories = get_terms('product_cat', $cat_args);
                ?>
                    <select name="free_samples_category">
                        <?php foreach($categories as $category) : ?>
                            <option value="<?php echo $category->term_id; ?>" <?php if(get_option('free_samples_category') == $category->term_id){ echo "selected "; } ?>><?php echo esc_attr($category->name);?></option>
                        <?php endforeach; ?>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="<?php echo esc_attr(get_option('gifts_cta')); ?>" alt="gifts call to action image" <?php if(get_option('gifts_cta') == "") { ?> style="display:none;" <?php } ?> data-img="gifts_cta" />
                    <input id="gifts_cta" type="hidden" name="free_samples_cta" value="<?php echo esc_attr(get_option('gifts_cta')); ?>" />
                    <input class="upload_cta_gift button-primary" type="button" value="Gifts CTA Image" data-cta="gifts_cta" />
                </td>
            </tr>
            <tr>
                <td><?php submit_button(); ?></td>
            </tr>  
        </table>
    </form>
</div>

但发生的情况是，当我单击第二个上传按钮（带有 的那个data-cta="gifts_cta"）时，与免费样品相关的图像正在更新。我究竟做错了什么？好像连发了两下。。。

标签： javascriptphpjquerywordpress