分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

发布时间:2023-09-06 01:13责任编辑:彭小芳关键词:jsdiv

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved