标签：button 刷新 查找 class 失效 不清楚 内容 pos 文件夹
今天就要放假了，把近来囤积的小玩意儿总结整理一下。
在请求一个html页面来嵌入到当前页会有一个问题，就是跟随请求过来的html他的样式表和脚本会失效。是因为文档加载的先后顺序等问题造成的。因此，加载一些纯文本还好。
举个例子，只有这个问题明白了，我们的原理才好理解。
b.html有一个点击事件，但是a.html通过ajax拿到b.html后，如果这个b.html的js不是写在页面里面的，你就会发现没有生效。css样式也一样，都需要重新绑定一下。
首先定义两个页面，一个父页面a.html,一个b.html
a页面我给它一个请求按钮 <button>我要一个页面，php快给我。</button> 给他一个容器 <div class="cont"></div>
b页面不要有head和body <p id="p">我是被拿到一个页面，我的内容是加油！</p>
b页面的js一定是一个单独的文件，如果css的话，我就只给了一个js脚本。
$(‘#p‘).css(‘background‘,‘red‘).on(‘click‘,function () {
alert(‘asdasd‘);
});
先来看我的后台php控制，其实这里也可以不用php，直接拿地址也行，不过感觉不够高级，写在php里，是不会有‘痕迹’的。
$content =file_get_contents(‘pegr/a.html‘);//我将a页面和a.js都放在分页文件夹下了 $script=file_get_contents(‘pegr/a.js‘); echo $content,$script;
然后是我们的js里的ajax请求
$(‘button‘).on(‘click‘,function () {
$.ajax({
url:‘getData.php‘,
type:‘POST‘,
async:true, //是异步加载
success:function(data){
console.log(data); //如果你不清楚下面为什么查找‘$’，看看输出的data就明白了
for (var i = -1, arr = []; (i = data.indexOf("$", i + 1)) > -1; arr.push(i));
//alert(arr);
var scripts =$(‘<script>‘+data.substring(arr)+‘<\/script>‘);
$(‘.cont‘).html(data.substring(0,arr));
// alert(data.substring(arr)) 分理出js脚步
$(‘body‘).append(scripts);
},
error:function(xhr){
console.log(‘错误‘);
console.log(xhr);
}
})
})
祝大家新年快乐。我今天下午也就可以回家了吧，想想还有些激动呢。
使用php后台给自己做一个页面路由，配合ajax实现局部刷新。
标签：button 刷新 查找 class 失效 不清楚 内容 pos 文件夹
原文地址：http://www.cnblogs.com/webSong/p/6346664.html
