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请求是异步的。

希望这有帮助。

'data-rel'灯箱不能使用ajax内容

1 个答案: