第二个ajax请求没有'不起作用

Second ajax request doesn't work

本文关键字:不起作用 ajax 请求 第二个      更新时间:2023-09-26

我制作了一个ajax网站,调用index.phpajax-containerdiv内/pages文件夹中的页面。

现在,我想在第一个ajax请求成功后发出第二个ajax请求,但第二个请求将只出现在特定的页面上,

例如:我调用页面work.php,在这个页面中,当我单击图像link-in时,我想调用同一文件夹中的页面work-slider,并用ajax容器div中的work-slider.php替换work.php页面但是我找不到解决办法,

这是我的实际代码:

index.php:

<div id="ajax-container">
 <?php
  $d = "pages/";
  if (isset($_GET['p'])) {
     $p = strtolower($_GET['p']);
     if (preg_match("/^[a-z0-9'-]+$/", $p) && file_exists($d . $p . ".php")) {
         include $d . $p . ".php";
     } else {
         include $d . "404.php";
     }
  } else {
     include $d . "home.php";
  }
 ?>
</div>

Ajax函数:

var afficher = function(data) {
    $('#ajax-container').fadeOut(250, function() {
        $('#ajax-container').empty();
        $('#ajax-container').append(data);
        $('#ajax-container').fadeIn(100, function() {});
    });
};
var lastRequest = null;
if (lastRequest !== null) {
    lastRequest.abort();
}
var loadPage = function(page, storeHistory) {
    if (typeof storeHistory === 'undefined') {
        storeHistory = true;
    }
    lastRequest = $.ajax({
        url: "pages/" + page,
        cache: false,
        success: f$.ajax({
    url: "pages/" + page,
    cache: false,
    success: function(resultFirst) {
        afficher(resultFirst);
        if (storeHistory === true) {
            history.pushState({
                'key': 'value',
                'url': page
            }, '', page);
        }
        $.ajax({
          
          // How can i define pageIn variable ?? 
          
          url: "pages/" + pageIn,
          cache: false,
          success: function(resultSecond) {
             afficher(resultSecond);
          }
      });
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        afficher('erreur lors du chagement de la page');
    }
});
    return false;
};
window.addEventListener('load', function() {
    setTimeout(function() {
        window.addEventListener('popstate', function(e) {
            if (e.state === null) {
                loadPage('home.php');
            } else {
                loadPage(e['state']['url'], false);
            }
        });
    }, 0);
});
  
  // link inside index.php
$('.link').bind('click', function(e) {
    e.preventDefault();
    var page = $(this).attr('href');
    loadPage(page);
    return false;
});
  // second link inside called page
  
  $('.link-in').bind('click', function(e) {
    e.preventDefault();
    var pageIn = $(this).attr('href');
    loadPage(pageIn);
    return false;
});

如果标签中的.link在页面加载后被日常插入到DOM中,bind((方法将失败:bind(。如果在绑定调用之后添加新的element,它将不会接收到侦听器绑定。

为了防止在页面中频繁插入html代码时出现这种情况,您应该使用on((方法:

  $('body').on('click' , '.link-in', function(e) {
     e.preventDefault();
     var pageIn = $(this).attr('href');
     loadPage(pageIn);
     return false;
  });

现在,在标签中的每个.链接,你们在正文内频繁地推,都会对点击监听器做出响应。关于在默认情况下使用on((而不是bind((的讨论,实际上可以在bind((文档中找到。