jQuery .next()不工作,元素保持为空

but5z9lq  于 2023-06-22  发布在  jQuery
关注(0)|答案(4)|浏览(131)

我尝试使用jQuery .next()将html添加到div,但没有结果。
这是HTML部分:

<div class="widget widget_border">

  <h3 class="widget_border" id="widget_lot">Last opened tasks 
      <div class="dashboard_dd_arrow"></div>
  </h3>
  <div class="widget_content"></div>
</div>

JavaScript:

(document).ready(function () {
  $('.widget h3').on('click', function () {
    if (!$.trim($(this).next('.widget_content').html())) {
      // if this widget don't have any data send ajax and load it

      var widget_id = $(this).attr('id');
      switch (widget_id) {
      case 'widget_lot':
        $.ajax({
          type: 'POST',
          url: '/dashboard/ajax_last_opened_tickets',
          data: {},
          success: function (data) {
            console.log(data);
            $(this).next('.widget_content').html('test');
          }
        });
        break;
      }
    } else {
      // show current one
      $(this).next('.widget_content').slideToggle().parent().toggleClass('active');
    }
  });
});

AJAX 调用进行得很顺利,我得到了想要的数据,但是.next()函数没有用widget_content类填充div
对此有什么解决方案或想法吗?
谢谢你。

zynd9foi

zynd9foi1#

尝试缓存$(this)引用到ajax调用的外部,并在成功回调的内部使用它。比如

_this.next('.widget_content').html('test');

注意:上面代码中的_this仅用于演示目的。

6xfqseft

6xfqseft2#

你需要在子函数中备份这个

$('.widget h3').on('click', function(){
    if( !$.trim($(this).next('.widget_content').html()) )
    {
        // if this widget don't have any data send ajax and load it

        var widget_id = $(this).attr('id');
        var _this = this; // backup this
        switch (widget_id) {
            case 'widget_lot':
                $.ajax({
                    type:'POST',
                    url: '/dashboard/ajax_last_opened_tickets',
                    data:{},
                    success:function(data){
                        console.log(data);
                        $(_this).next('.widget_content').html('test'); //edit here
                    }
                });
                break;
        }
    }
    else {
        // show current one
        $(this).next('.widget_content').slideToggle().parent().toggleClass('active');
    }
});
ldioqlga

ldioqlga3#

在你的 AJAX 函数中,$(this)并不是你想象的那样,因为它引用的是success函数/ajax请求。你应该这样做:

var $self = $(this);
$.ajax({
     type:'POST',
     url: '/dashboard/ajax_last_opened_tickets',
     data:{},
     success:function(data){
         console.log(data);
         $self.next('.widget_content').html('test');
     }
});

希望这能帮上忙。

6jjcrrmo

6jjcrrmo4#

$(this)inside success指向当前方法而不是最上面的方法。保存到变量。

( document ).ready(function() {
$('.widget h3').on('click', function(){
    var $this = $(this);
    if( !$.trim($this.next('.widget_content').html()) )
    {
        // if this widget don't have any data send ajax and load it

        var widget_id = $this.attr('id');
        switch (widget_id) {
            case 'widget_lot':
                $.ajax({
                    type:'POST',
                    url: '/dashboard/ajax_last_opened_tickets',
                    data:{},
                    success:function(data){
                        console.log(data);
                        $this.next('.widget_content').html('test');
                    }
                });
                break;
        }
    }
    else {
        // show current one
        $this.next('.widget_content').slideToggle().parent().toggleClass('active');
    }
});
});

相关问题