'data-rel'ライトボックスがajaxコンテンツと連動していません

Question

私はこのページを1ページのウェブサイトの一部にしており、ウェブサイトの「ポートフォリオコンテンツ」を埋めるためにajaxと呼んでいます。私はdata-rel="lightbox"が動作していないAJAXでそれを呼び出す

<div class="container"> 
    <div class="row"> 
     <div class="heading-section col-md-12 text-center"> 
      <h2>{{ $data['generals']->portfolio_title }}</h2> 
      <p>{{ $data['generals']->portfolio_secondary_title }}</p> 
     </div> <!-- /.heading-section --> 
    </div> <!-- /.row --> 
    <div class="row"> 
     @foreach($data['portfolio'] as $port) 
     <div class="portfolio-item col-md-3 col-sm-6"> 
      <div class="portfolio-thumb"> 
       <img src="visitor/images/gallery/{{$port->background_image}}" alt=""> 
       <div class="portfolio-overlay"> 
        <h3>{{$port->title}}</h3> 
        <p>{{$port->body}}</p> 
        <a href="visitor/images/gallery/{{$port->background_image}}" data-rel="lightbox" class="expand"> 
         <i class="fa fa-search"></i> 
        </a> 
       </div> <!-- /.portfolio-overlay --> 
      </div> <!-- /.portfolio-thumb --> 
     </div> <!-- /.portfolio-item --> 
     @endforeach 
    </div> <!-- /.row --> 
</div> <!-- /.container --> 

。私はそれを呼び出していないと私はちょうどうまく動作しているプロジェクトにコードを含める場合。なぜAJAXが動作しないのですか？

私はこのようにそれを呼び出す：

function appendData(div, url){ 
    $.ajax({ 
     url: url, 
     success: function (data) { 
      $(div).append(data); 
     } 
    }); 
} 
appendData('#portfolio'); 

私はこのplugin

を使用していますが、私はこのようにそれを呼び出す：

$(function(){ 
    $('[data-rel="lightbox"]').lightbox(); 
    }); 

ありがとう！

Answer 1

あなたはドキュメントに新しいDOMを追加した後にプラグインを初期化するためにきました：

function appendData(div, url){ 
    $.ajax({ 
     url: url, 
     success: function (data) { 
      $(div).append(data); 

      $('[data-rel="lightbox"]').lightBox(); //init plugin for new elements 
     } 
    }); 
} 

注：あなたは新しい要素が既にDOMに追加されsuccessコールバック内のプラグインを初期化する必要があり、それがappendDataの後に呼び出すと、$.ajax要求が非同期であるため、動作しません。

これが役に立ちます。