javascript - addClass() 函数在 ajax 调用后不起作用

Question

我正在进行一个简单的 AJAX 调用，它会在有人单击 anchor 后触发。 AJAX 成功后，我想在触发 AJAX 的 anchor 添加一个类。

虽然脚本工作正常，并且成功函数返回所有正确的数据，但当我尝试 addClass() 时它不起作用。我使用了 hide() 方法来查看 jQuery 是否正确运行并且它也不起作用。控制台不打印任何错误。

为了调试，我使用了一个警报，它起作用了!警报如何正常工作而 addClass() 和 hide() 都不能正常工作？

<a href="#" class="refreshor" value="20">1</a>
<a href="#" class="refreshor" value="40">2</a>

jQuery(document).ready(function($) {
    $('.refreshor').on('click',function(e){
        e.preventDefault();
        var search = $('#searchin').val();
        var page = $(this).text();
        var that = this;
        $.ajax({    
            type: "POST",
            url: "components/com_tagger/scripts/ajaxSearch.php",
            data: {
                "search": search,
                "page": page
            },
            success:function(response) {
                $('.ajaxSearchResults').html(response);
                $(that).addClass('preventer'); //this doesnt work
                $(that).hide(); //this doesnt work
                var test = $(that).text(); 
                alert(test); //this works!                  
            } 
        });
    });
});

Answer 1

在成功回调中，您替换了 .ajaxSearchResults 的内容

$('.ajaxSearchResults').html(response);

然后 that 不是指这个容器内的那些。

您需要使用委托(delegate)，这将允许您在尚未在 DOM 中的元素上绑定(bind)事件

$('.ajaxSearchResults').on('click', '.refreshor',function(e){
    e.preventDefault();
    var search = $('#searchin').val();
    var page = $(this).text();

    var thisValue = $(this).attr('value'); // save the current value of the `a` clicked
    $.ajax({    
        type: "POST",
        url: "components/com_tagger/scripts/ajaxSearch.php",
        data: {
            "search": search,
            "page": page
        },
        success:function(response) {
            $('.ajaxSearchResults').html(response);

            var that = $('.ajaxSearchResults').find('.refreshor[value="'+thisValue+'"]'); 
            // look for the `a` that have the saved value.

            that.addClass('preventer');
            that.hide(); 
            var test = that.text(); 
            alert(test);        
        } 
    });
});