关于怎样用PHP及JS来动态加载html元素及加载的html代码绑定事件失效的解决方法!

首先编写好的html代码放入php文件里面设置请求头格式为text/html

然后呢我将用jquery来操作 先定义一个用了盛放代码的容器

$(function(){}) => window.onload

.sn-header-bg 是我用来盛放代码的容器

我的php文件名是header.php放在data目录下!

执行以上代码完成后一个页头就出来了!

加载完成后我在header里面绑定了两个函数,但是全部失效了,原因是没找到对应的dom元素,

根本原因是我没加载完成之前这两个函数就已经执行去寻找对应dom元素了,所有报错了。

那么怎样解决呢,我在网上找了相关的资料,找到一种解决方法!

解决方法就是当页面加载完成之后我才执行对应的函数,去绑定事件,这样一来就不会出现错误了,

也不会出现事件失效的bug了!

======================

今天是我第一天开通博客园的博客,这也是我第一次发博客,如果有什么错误或者有更好的解决方法,请多多指教!

时间: 2024-08-01 10:45:56

关于怎样用PHP及JS来动态加载html元素及加载的html代码绑定事件失效的解决方法!的相关文章

js如何动态为指定的元素添加内容

js如何动态为指定的元素添加内容:在实际应用中要根据代码的执行情况来动态的创建一个元素,然后添加到指定的元素,下面就通过一个简单的实例简单的介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

js动态加载HTML元素时出现的无效的点击事件

项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: js代码: // 推荐商家点击标题展开与收起$('.toggle-tag').on('click', function(){    var ele = $(this).parents('tr').next().find('.pro-details');    if(ele.is(':hidden'))

jquery动态生成html代码绑定事件

今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老,于是结合网上加上自己的测试,找到了一种解决方法. 我使用的jquery是1.9.11,jquery1.7之后就将live方法废弃了,新增了on和off方法,我的解决办法就是使用on方法,首先看代码: <div class="h3"> <h3>李健1</h3&

关于动态生成dom绑定事件失效的原因

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1.事件失效的原因:(1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取不到

Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

可以使用$.parser.parse();这个方法进行处理: 例如: $.parser.parse(); 表示对整个页面重新渲染,渲染完就可以看到easyui原来的样式了: var targetObj = $("<input name='mydate' class='easyui-datebox'>").appendTo("#id"); $.parser.parse(targetObj); 表示重新渲染某个特定的组件.

关于谷歌调试修改js之后,刷新失效的解决方法?

明明修改了代码,也保存了,但是界面还是显示原来的js格式,没有任何改变,这个时候不是路径问题,在js里加个alert():测试也是不弹出来,这时候可能是没有清理谷歌的缓存,可以在谷歌调试的地方,禁用缓存,让每次加载页面都执行最新的js, 进入network ,就是图中的1,把2,disable cache勾选上,多刷新几遍,有可能还不行,不知道什么原因,但是点击前面的clear,多刷新几遍,就会好了

黄聪:jquery mobile通过a标签页面跳转后,样式丢失、js失效的解决方法

问题描述: 用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 解决办法1: 将所有的css以及js全部放在div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中内的内容加载进dom,而外的代码都不会加载,所以导致在外的js和css都失效了. 解决办法1: 在header设置全局属性. <script>$.mobile.ajaxEnabled = false;</script> 原理: 全局禁止jqm使用ajax

android 4.4 JS 和 java 交互失效的解决方法

demo自己写的,我放CSDN上,自己下载,这里说下demo里涉及到的东西,并且说下注意点. appcompat_v7 项目是创建项目自带的,如果你本地已经有了就不需要这个工程. demo 内容 1.支持 android 调用 js 里某方法 2.支持android调用JS某方法并且获取JS方法返回值,然后再次调用JS去显示.(4.4) 3.支持点击JS里某个按钮,并且返回给android. 1.  AndroidManifest.xml 里   android:targetSdkVersion

JQuery对于动态生成的标签绑定事件失效

JQuery对整个html文档进行dom操作后,我们要想动态绑定事件,有两种方法 1.在进行dom操作时,在标签中写上onclick="afun()" 2.利用document的操作,代码如下,优先推荐下边这种方式 $(document).on("click","#id",function(){ //事件的方法 }); 原文地址:https://www.cnblogs.com/Lyn4ever/p/11376151.html