javascript - “data-rel”灯箱不适用于 ajax 内容

Question

我有这段代码，它是单页网站的一部分，我用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 调用它时，data-rel="lightbox" 不起作用。如果我不调用它而只是将代码包含在项目中，它就可以正常工作。为什么 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
        }
    });
}

注意:您应该在 success 回调中初始化您的插件，其中新元素已经附加到 DOM，如果您在 之后调用它，它将不起作用appendData 因为 $.ajax 请求是异步的。

希望这有帮助。