Question

我的主页使用jquery ajax调用加载页面。在图片子页面中有3个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();
    });
}

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

1 个答案: