ajax调用后，addClass（）函数不起作用

Question

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

虽然脚本工作正常，并且success函数返回所有正确的数据，但当我尝试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是不是指一个是这个容器内的人。

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

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

Answer 2

您已经（在评论中）声明您所拥有的链接（您正在尝试添加一个类）的参考是在您要替换整个内容的面板内。

通过替换内容，您对链接的引用不再位于DOM中。 您需要通过某种方式识别按下了哪个链接，并在替换的标记中再次找到该链接。

一个建议是使用识别链接data-*属性（ value是不是一个有效的属性a元）

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

并在点击捕获该值：

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

当您替换内容时，您可以找到此链接：

success:function(response) {
     $('.ajaxSearchResults').html(response);
     $('.refreshor').filter(function(){
        return $(this).data('value') == val;
     }).addClass('preventor');
     ...

Answer 3

如果要替换锚点并且想要稍后设置相同的锚点，请将其值保存到变量中，并在成功替换后将其查找：

注意a没有value所以请使用data-value="20" 。

HTML

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

JS

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

                $('.refreshor[data-value="' + value + '"]').addClass('preventer');
                $('.refreshor[data-value="' + value + '"]').hide();

                var test = $(that).text(); 
                alert(test); //this works!                  
            } 
        });
    });
});

UPDATE

并使用事件委托来绑定点击，以便事件不会丢失。

Answer 4

根据您的意见和答案，我提出了这个工作正常：

我向锚点添加了id属性

  <a href="#" id="link1" class="refreshor" >1</a>
  <a href="#" id="link2" class="refreshor" >2</a>

并将js更改为：

jQuery(document).ready(function($) {

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

        $.ajax({

            type: "POST",
            url: "components/com_tagger/scripts/ajaxSearch.php",
            data: {"search":search,"page":page},
            success:function(response) {
                $('.ajaxSearchResults').html(response);
                $(that).addClass('preventer');


            } 
        });


    });

});

Answer 5

您必须在ajax触发器后添加它。

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




jQuery(document).ready(function($) {
  $(document).on('click', '.refreshor', 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).hide(); //this doesnt work
       var test = $(that).text(); 
       alert(test); //this works!                  
     }

     $(that).addClass('preventer'); //check it out

   });
 });
});