jquery selector.closest function

Question

私はもちろん、いくつかのjQuery機能を使って、laravelで開発された小さな分類広告スクリプトを持っています。私はちょうど設計の代わりにいくつかの変更を適用しましたが、私はスクリプトに関する問題があります。

旧マークアップ：

@foreach($ads as $ad) 
     <tr> 
      <td width="100"> 
       <img src="{{ media_url($ad->feature_img) }}" class="img-responsive" alt=""> 
      </td> 
      <td> 
       <h5><a href="{{ route('single_ad', $ad->slug) }}" target="_blank">{{ $ad->title }}</a> ({!! $ad->status_context() !!})</h5> 
       <p class="text-muted"> 
        <i class="fa fa-map-marker"></i> {!! $ad->full_address() !!} <br /> <i class="fa fa-clock-o"></i> {{ $ad->posting_datetime() }} 
       </p> 
      </td> 
      <td> 
       <a href="{{ route('edit_ad', $ad->id) }}" class="btn btn-primary"><i class="fa fa-edit"></i> </a> 
       <a href="javascript:;" class="btn btn-danger deleteAds" data-slug="{{ $ad->slug }}"><i class="fa fa-trash"></i> </a> 
      </td> 
     </tr> 
    @endforeach 

のjQuery：

 $('.deleteAds').on('click', function(){ 
      if (! confirm('{{ trans('app.are_you_sure') }}')){ 
       return ''; 
      } 
      var selector = $(this); 
      var slug = selector.data('slug'); 
      $.ajax({ 
       url : '{{ route('delete_ads') }}', 
       type: "POST", 
       data: {slug:slug, _token:'{{ csrf_token() }}'}, 
       success : function (data) { 
        if (data.success == 1){ 
         selector.closest('tr').hide('slow'); 
         toastr.success(data.msg, '@lang('app.success')', toastr_options); 
        } 
       } 
      }); 
     }); 

この機能は、一度トリガされて、私は項目（私の分類の1）を削除することを決定し、よりにもTRの関連を非表示になります

新しいマークアップは、もう少し広範なものです：

@foreach($ads as $ad) 
    <!-- ad-item --> 
    <div class="ad-item row"> 
     <div class="item-image-box col-sm-4"> 
      <div class="item-image"> 
       <a href="{{ route('single_ad', $ad->slug) }}"><img src="{{ media_url($ad->feature_img) }}" alt="Image" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item-info col-sm-8"> 
      <div class="ad-info"> 
       <h3 class="item-price">$800.00</h3> 
       <h4 class="item-title"><a href="{{ route('single_ad', $ad->slug) }}">{{ $ad->title }}/({!! $ad->status_context() !!})</a></h4> 
       <div class="item-cat"> 
        <span><a href="#">Electronics &amp; Gedgets</a></span>/
        <span><a href="#">Tv &amp; Video</a></span> 
       </div>          
      </div> 
      <div class="ad-meta"> 
       <div class="meta-content"> 
        <span class="dated">Posted On: <a href="#">{{ $ad->posting_datetime() }}</a></span> 
        <span class="visitors">Visitors: 221</span> 
       </div>          
       <div class="user-option pull-right"> 
        <a class="edit-item" href="{{ route('edit_ad', $ad->id) }}" data-toggle="tooltip" data-placement="top" ><i class="fa fa-pencil"></i></a> 
        <a class="deleteAds delete-item" href="javascript:;" data-toggle="tooltip" data-placement="top" ><i class="fa fa-times"></i></a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- ad-item --> 
    @endforeach 

selector.closest（ 'tr'）のjQuery部分を変更しようとしました。hide（ 'slow'）;はになります。selector.closest（ 'ad-item'）。hide（ 'slow'）;しかし、それは仕事や仕事をしていないようです。

どのように私はこの機能を再動作させるために関連するjQueryの部分を微調整できますか？いくつかの専門家の助言は非常に高く評価されるでしょう。

Answer 1

.add-itemがマークアップに含まれていない場合、クリックイベントがページの読み込み時に正しくバインドされていない可能性があります。さらに、jQueryは、マークアップ内の<a>タグのデフォルト動作を防止する必要があります。

：あなたの click eventは、ページの読み込みにDOMに存在しないこと .deleteAdds上で動作しますを確認します後

<div class="item-list"> 
@foreach($ads as $ad) 
    <!-- ad-item --> 
    <div class="ad-item row"> 
     .... 
     ... 
     <div class="item-info col-sm-8"> 
      <div class="ad-meta"> 
       ...         
       <div class="user-option pull-right"> 
        <a class="deleteAds delete-item" href="#" data-toggle="tooltip" data-placement="top" ><i class="fa fa-times"></i></a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- ad-item --> 
@endforeach 
</div> 

：

すべて.add-item年代を包む、DIVを考えてみましょう、このコードは動作するはずです

$('.item-list').on('click', '.deleteAds', function(event){ 
    event.preventDefault(); 
    var selector = $(this); 
    ... 
    $.ajax({ 
     .... 
     success : function (data) { 
      console.log('while this works, your code below should too.'); 
      if (data.success == 1){ 
       selector.closest('.add-item').hide('slow'); 
      } 
     } 
    }); 
});