1. 前言
由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件。这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题,因为并无这个问题存在(jquery版本:1.10.2.js)。
2. 本质原因
假定页面内有$(.btn1).click(function(){})事件,你手动复制一个包含class为btn1的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来控制达到功能和预期一样即可。
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);}}
jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案
原文地址:http://www.cnblogs.com/fanbi/p/7581685.html