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('<div id="modifySettings_'+data.id+'" value="'+data.value+'">new item</div>');
//重新绑定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 = '<%= Utils.getSettingTabIndex() %>';
for(var index in tabsData){
if(tabsData[index].id==tabId)
showTabs(tabsData[index].id);
}
}