第二个ajax请求没有'不起作用
Second ajax request doesn't work
我制作了一个ajax网站,调用index.php
中ajax-container
div内/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((文档中找到。
相关文章:
- 带有.change()的AJAX不起作用
- 加载后的页面与ajax表单提交不起作用
- Ajax模式下的Jquery Select2 V4在IE9中不起作用
- curl和fileget_contents在ajax调用后不起作用
- Ajax在JQuery表单插件中不起作用
- 为什么 AJAX POST 请求不起作用
- javascript验证和ajax调用同时不起作用
- 使用Ajax的PHP_POST不起作用
- 另一个Ajax函数触发的Ajax函数不起作用
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- AJAX上传文件不起作用
- Ajax调用不起作用
- Ajax:Ajax响应中的链接不起作用
- HtmlBox(jquery插件)在ajax调用中不起作用
- AJAX请求不起作用,除非使用alert()
- codeigniter ajax中的gzip压缩不起作用
- Ajax Post请求不起作用
- IE8 jquery ajax头请求不起作用
- 在同一个按钮上调用多个函数对我来说不起作用(ajax)
- jQuery验证submitHandler在$中不起作用.Ajax post表单数据