如何在ajax调用中加载动态内容（jquery）？

Question

我的主页加载带有 jquery ajax 调用的页面。在图片子页面中有 3 个 div，每个 div 也加载了一个带有 ajax 的 php。我想在每个子页面中包含一个画廊 js。但是，js不会加载。这是我在 index.php 中的子页面代码：

<script type="text/javascript">
$(function()
{
  var actualmenu = 'fooldal.html';
  $('#tartalom').load('fooldal.html');
  $('.fooldal').click(function()
  {
    $('#tartalom').load('fooldal.html');
    actualmenu = 'fooldal.html';
  }
  );

  $('.kepek').click(function(){
 $('#tartalom').load('kepek.php', function(){
   $(document.body).on('click', 'a[rel=gallery_view]' ,function(){
    $(this).KeViewer('gallery', {'percent' : 70});
    return false;
  });
 });
  actualmenu = 'kepek.php';
 });
});
</script>

还有我的kepek.php页面：

<script type="text/javascript">
$(function()
{
  $('#galeria').load('kepek_csenge.php');
  $('#csenge').click(function()
  {
    $('#galeria').load('kepek_csenge.php');
  }
  );
);
</script>

<div id="albums">
    <div class="album" id="csenge">
        Csenge
        <br/>
        <img src="albumok/csenge/01.jpg" alt="csenge"/>
    </div>
</div>
<div style="clear:both;"></div>
<div id="galeria" width="500"></div>

kepek_csenge.php 里面有这样的行，应该会触发图库：

<a class="thumb_wrapper" href="albumok/csenge/01.jpg" title="Első" rel="gallery_view"><img alt="" class="thumb" src="albumok/csenge/thumbs/01.jpg" /></a>

不幸的是，它只是加载了一个带有所选图片的新页面。在这个页面如何使用galleryviewer js？

Answer 1

在您使用 ajax 加载任何内容之前，了解您正在加载的文档是 ready 很重要

这意味着在您的 ajax 页面中包裹在 $(function() 中的代码将在遇到时立即触发。如果该代码在它引用的 html 之前，则它不会找到这些元素，因为它们还不存在。

尝试将ajax加载内容中的所有脚本标签移到html之后。

一般来说，将所有脚本合二为一，将不同部分封装在函数中，然后在 load() 的成功回调中调用这些函数；

function loadPage(page){
    var url = '...' +page;
    $('#selector').load(url, function(){
        initViewer();
    });
}