Question

正在研究一个自己运行的ajax post函数 - 但是如果我有两个小部件实例，那么它们都会被触发并显示错误消息，而不仅仅是那个。

我正在尝试.each（）来绑定点击，但它不想工作。

$('.cjd-subscribe-button').each(function() {

    $(this).click(function() {

        var cjd_nonce = $("#cjd-widget #cjd_nonce").val();
        var cjd_email = $('#cjd_email').val();

        $.ajax({
                url: cjdAjax.ajaxurl,
                type: 'POST',
                data: {
                    action: 'cjd_subscribe',
                    nonce: cjd_nonce,
                    email: cjd_email,
                },
                cache: false,
                success: function(data) {
                    var status  = $(data).find('response_data').text();
                    var message = $(data).find('supplemental message').text();

                    if(status == 'success') {
                        console.log(message);
                        $(".email-success p.message").text(message);
                        $(".email-success").slideDown();                   
                        $(".email-success").delay(4000).fadeOut();
                    }
                    else {
                        console.log(message);
                        $(".email-error p.message").text(message);
                        $(".email-error").slideDown();     
                        $(".email-error").delay(4000).fadeOut();
                    }
                }
        }); 
    });

});

HTML代码：

<div id="cjd-widget">
        <input type="email" name="cjd_email" id="cjd_email" class="cjd-email-input"/>
        <input type="hidden" name="cjd_nonce" id="cjd_nonce" value="<?php echo wp_create_nonce( 'cjd_nonce' ); ?>" />
        <input type="button" class="cjd-subscribe-button" id="cjd-subscribe" value="<?php  _e( 'Subscribe', 'cjd'); ?>" />
        <div class="email-success">
            <p class="message"></p> 
        </div> 
        <div class="email-error">
            <p class="message"></p> 
        </div> 
    </div>

Answer 1

您正在使用类来显示消息。通过这种方式，消息将显示在该类的所有元素中。

您必须指定哪个元素应包含该消息。您可以使用或不使用ID。如果您不想使用ID，则可以根据您的HTML访问所需的元素：

$('.cjd-subscribe-button').click(function() {
    var $success = $(this).parent().find('.email-success');
    var $error = $(this).parent().find('.email-error');

    $.ajax({
        success: function(data) {
            var status  = $(data).find('response_data').text();
            var message = $(data).find('supplemental message').text();

            if(status == 'success') {
                console.log(message);
                $success.find('p.message').text(message);
                $success.slideDown();                   
                $success.delay(4000).fadeOut();
            } else {
                console.log(message);
                $error.find('p.message').text(message);
                $error.slideDown();     
                $error.delay(4000).fadeOut();
            }
        }
    }); 
});

示例：JSFiddle

尝试一下，让我知道它是否有帮助！

Jquery每次单击ajax都不起作用

1 个答案: