Question

对不起，我的英语不好：）

我在Laravel中成功完成AJAX时遇到问题，在成功完成AJAX中的处理后，其他功能无法正常工作。如下图所示，我喜欢状态或评论，折叠按钮和“收藏夹”按钮的功能不起作用。

我使用AJAX成功

 $("#divwrap").load(" #divwrap");

div，其ID为divwrap，我用作包装器

请帮助：）

代码

<div id="divwrap">
  @foreach($singgah as $d)    
  <div class="box box2">
    <div class="box-body box-body-custom">
      <div class="post">
        <div class="user-block">
          <img class="img-circle" src="{{ asset('storage/' . $d->user->avatar ) }}" alt="user image">
          <span class="username">
            <?php $email = Crypt::encrypt($d->user->email) ?>
            <a href="{{ action('ProfileController@show', $d->user->email) }}">{{$d->user->name }} </a>  
            <div class="btn-group pull-right custom-curret nav-right1">
              <button type="button" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="fa fa-ellipsis-h"></span>
              </button>
              <ul class="dropdown-menu">
                @if(Auth::user()->name ==$d->user->name )
                  <li><a onclick="editForm('{{$d->id }}')" class="pointer-jempol"> <i class="fa fa-pencil-square-o"></i> Edit Kiriman</a></li>
                  <li><a onclick="deleteData('{{$d->id }}')" class="pointer-jempol"> <i class="fa fa-times-circle"></i> Hapus Kiriman</a></li>
                  <li role="separator" class="divider"></li>
                @endif
                <li><a href="#" class="pointer-jempol"><i class="fa fa-exclamation-circle"></i> Laporkan Kiriman</a></li>
              </ul>
            </div>
          </span>
          <span class="description"><i class="fa fa-hashtag" title="Sebagai"></i>  {{$d->category}} - <i class="fa fa-clock-o"></i> {{$d->created_at->diffForHumans()}}</span>
        </div>        
        <p>
          {{ $d->content }}            
        </p>
        <div class="box box-default box-costum-collapse">
          <div class="box-header with-border" style="padding:0px;">
            <a class="label label-primary" title="Kota"><i class="fa fa-map-marker"></i> {{$d->lokasi }}</a>
            <a class="label label-primary" title="Kontak"><i class="fa fa-phone-square"></i> {{$d->contact }}</a>
              <table class="pull-right">
                <tr>
                    <td class="mailbox-star" data-value="{{$d->id}}"><i class="fa fa-star-o text-red"></i> <a id="coba">{{ $d->singgahlike->count() }}</a></td> 
                    <td class="btn-nopadding btn btn-box-tool" data-widget="collapse"> | <i class="fa fa-comment"></i> {{ $d->singgahcomment->count() }}</td>
                </tr>
              </table>
          </div>
          <div class="box-body" style="padding:0px;">
            <div class="box-komentar">
              @include('layouts.form.formComment')
              <div id="box-komentar">
              @foreach($d->singgahcomment as $c)
                <div class="komentar-post"> 
                  <div class="user-block">
                    <img class="img-circle" src="{{ asset('storage/' . $c->user->avatar ) }}" alt="user image">
                    <span class="username usernamekoment">
                      <a href="{{ action('ProfileController@show', $c->user->email) }}">{{$c->user->name }} </a>  
                      <div class="btn-group custom-curret nav-right-koment pull-right">
                        <button type="button" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="fa fa-ellipsis-h"></span>
                        </button>
                        <ul class="dropdown-menu">
                          @if(Auth::user()->name ==$c->user->name )
                          <li><a onclick="deleteComment('{{$c->id }}')" class="pointer-jempol"><i class="fa fa-times-circle"></i> Hapus Komentar</a></a></li>
                          <li role="separator" class="divider"></li>
                          @endif
                          <li><a href="#" class="pointer-jempol"><i class="fa fa-exclamation-circle"></i> Laporkan komentar</a></li>
                        </ul>
                      </div>
                    </span>
                    <span class="description descriptionkoment"><i class="fa fa-clock-o"></i> {{$c->created_at->diffForHumans()}}</span>
                  </div>                 
                  <p>{{ $c->comment }}</p>
                </div>
              @endforeach
              </div>
            </div>
          </div>
        </div>
      </div>                            
    </div>
  </div>      
  @endforeach
</div>

这是一个ajax成功过程：

 $(function () {
  $(".mailbox-star").click(function (e) {
    e.preventDefault();
    var singgah_id = $(this).data('value');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
      url: "{{ url('singgah/like') }}",
      type: "POST",
      data: {singgah_id:singgah_id},
        success: function (data) {
          $("#divwrap").load(" #divwrap");  
          $('div.flash-message').html(data);
        },
        error: function () {
          alert('Oops! error!');
        }
      });
    //detect type
    var $this = $(this).find("i");
    var fa = $this.hasClass("fa");
    if (fa) {
      $this.toggleClass("fa-star");
      $this.toggleClass("fa-star-o");
    }
  });
});

下面，我显示一个按钮，该按钮在AJAX成功按钮正常工作之前只能工作一次，但是在AJAX成功按钮之后却无法正常工作

Answer 1

这是因为在jQuery更改并再次加载DOM元素之后，即使id和类名相同，但DOM元素的虚拟id发生了变化，并且javascript或jQuery认为这与以前的元素不同。

换句话说，jQuery在加载DOM时附加到元素，因此加载完成后，它无法识别新元素。为此，您必须改为从文档中获取元素。

因此您的代码将如下所示：

$(document).on('click', ".mailbox-star", function (e) {
    e.preventDefault();
    var singgah_id = $(this).data('value');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
      url: "{{ url('singgah/like') }}",
      type: "POST",
      data: {singgah_id:singgah_id},
        success: function (data) {
          $("#divwrap").load(" #divwrap");  
          $('div.flash-message').html(data);
        },
        error: function () {
          alert('Oops! error!');
        }
      });
    //detect type
    var $this = $(this).find("i");
    var fa = $this.hasClass("fa");
    if (fa) {
      $this.toggleClass("fa-star");
      $this.toggleClass("fa-star-o");
    }
  });

注意此行：

$(document).on('click', ".mailbox-star", function (e) {

代替此：

$(function () {
  $(".mailbox-star").click(function (e) {

因此，如果要让事件在重新加载部分DOM之后起作用，则必须处理文档中的选择器。请注意，元素的选择比第一个要慢一些。

AJAX + Laravel：成功完成AJAX处理后，其他功能无法正常工作

1 个答案: