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