ajax已返回页面却不能显示,jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案...

1. 前言

由于项目需要，需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件。这个不是解决用jquery load加载页面到div时,不执行页面js的问题 这类问题，因为并无这个问题存在(jquery版本：1.10.2.js)。

2. 本质原因

假定页面内有$(.btn1).click(function(){})事件，你手动复制一个包含class为btn1的div到页面(ajax返回后加入的div)，然后会发现你点击那个div，并不会被响应，如果你在console执行$(.btn1)确实有包括新添加的div，这个问题就在于当前的div没有被绑定到那个事件中。

标题的问题，本质就是上面描述的问题。

3.解决方法

之前的代码

$(document).ready(function(){

$('[id^="modifySettings_"]').bind("click",function(){

//some code

}

}

修改后的代码

//此函数变量得放在ready方法外面，否则也不能被响应

var registerClickCheckbox = function(){

$('[id^="modifySettings_"]').bind("click",function(){

//some code

}

$(document).ready(function(){

//new add

registerClickCheckbox();

$.ajax({

type: "POST",

url: "/MyProject/settingl?mode=addItem

data: $("#addNewItem").serialize(),

dataType: "json",

success: function (data) {

$('#div0').after('

new item

');

//重新绑定click操作

registerClickCheckbox();

},

error: function(data) {

alert("error:"+data.responseText);

}

});

}

4. 其它(可跳过，纯记录)

如果load页面里面有两个tab，而且两个tab共用部分的代码，另一个页面要加载这页面的两个tab时，对$.tab方法使用可以稍微变通处理，不需要两个tab都加载子页面，只需加载一个，然后另一个用js来控制达到功能和预期一样即可。

var tabsData = [{"id" : "tabs_basic"},

{"id" : "tabs_2"},

{"id" : "tabs_3"},

{"id" : "tabs_loadsub1"},

{"id" : "tabs_loadsub2"}];

function hideAllTabs(){

for(var i=1; i<10;i++){

var evalStr = "$('[role=\"tabpane'+i+'\"]').hide()";

eval(evalStr);

}

$('[role="presentation"]').removeClass('active');

}

function showTabs(tabsId) {

hideAllTabs();

if(tabsId != 'tabs_sub1'){

$("#"+tabsId).show();

$("a[href='#"+tabsId+"']").tab('show');

}else{

$('#tabs_sub2').show();

$('[href="#tabs_sub1"]').parent().addClass('active');

}

}

function tabsHandler(event) {

var data = event.data;

showTabs(data.id);

timeOut = setTimeout(function(){

$.ajax({

type: 'POST',

data: {

mode:'saveSettingTabIndex',

tabId:data.id

},

url : './siconfig',

success : function(msg) {

}

});

}, 100);

return false;

}

$(document).ready(function() {

$(tabsData).each(function(){

$("a[href='#"+this.id+"']").bind('click',{id : this.id},tabsHandler);

});

var tabId = '';

for(var index in tabsData){

if(tabsData[index].id==tabId)

showTabs(tabsData[index].id);

}

}

IE8中jQuery&period;load&lpar;&rpar;加载页面不显示的原因

一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...

解决jQuery load&lpar;&rpar;加载GB2312页面时出现乱码

jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. 这是jQueryAJAX.html /p>

jquery load 加载改造，只加载body

背景: 项目中大量用到了jquery和easyui组件,原生load经常出现主页面异常,原因是组件被重复初始化.也考虑过用iframe,但是在实际项目中的效果,最终取消了iframe方案,也尝试了其他 ...

Jquery load&lpar;&rpar;加载GB2312页面时出现乱码的解决方法

问题描述:jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. a.php