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('<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);
	}
}