1、动态添加div

 function cDiv(num){

 var oDiv=document.createElement("div");

 oDiv.className='divstyle';

 oDiv.id=num;

 oDiv.innerHTML=num;

 document.body.appendChild(oDiv);

 document.getElementById(num).className = 'divstyle'; //引用外部css

 oDiv.onmouseout=function(){run(num);}

 }

2、在php页面中引用js文件

 <head>

 <script type="text/javascript" src="demo.js"></script>

 </head>

3、调用添加div方法

 <?php

       $message=array("123","456","789");

         $count_json=count($message);//获取数组长度，添加相应div

         for ($i = 0; $i < $count_json; $i++)

            {

                  $meg =$message[$i];

                  //调用JavaScript方法，传递参数值

              echo "<script type='text/javascript'>cDiv($meg);</script>";

            }

 ?>

JavaScript 动态添加div 绑定点击事件的更多相关文章

  1. 【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件，事件无效 解决

    背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, inde ...

  2. js动态添加Div

    利用JavaScript动态添加Div的方式有很多,在这次开发中有用到,就搜集了一下比较常用的. 一.在一个Div前添加Div <html> <body> <div id ...

  3. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  4. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  5. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  6. javascript动态添加效果

    <script type="text/javascript"> window.onload=function(){ $("#ch").click(f ...

  7. 通过jQuery给<li>绑定点击事件

    背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){  commonAjaxCall ...

  8. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

随机推荐

  1. java 调用webservice的各种方法总结,wsimport方法总结

    http://www.blogjava.net/zjhiphop/archive/2009/04/29/webservice.html wsimport生成webservice客户端: wsimpor ...

  2. CodeForces 722A

    A. Broken Clock time limit per test:1 second memory limit per test:256 megabytes input:standard inpu ...

  3. HDU 2585 [Hotel]字符串递归处理

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2585 题目大意:马克思要找个曾经去过的很好的旅馆,可惜他记不完整旅馆的名字.他有已知的部分信息和可能的 ...

  4. 使用 visualstudio code 编辑器调试执行在 homestead 环境中的 laravel 程序

    由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...

  5. Ceph QoS 初探（下）

    作者:吴香伟 发表于 2017/01/24 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 存储QoS是个可以做很大也可以做很小的特性.SolidFire认为将Q ...

  6. 用 Lua 实现一个微型虚拟机-基本篇

    用 Lua 实现一个微型虚拟机-基本篇 目录 介绍 机器指令模拟 最终核心代码 虚拟机内部状态可视化 完整项目代码 后续计划 参考 介绍 在网上看到一篇文章 使用 C 语言实现一个虚拟机, 这里是他的 ...

  7. [Spark] - HashPartitioner & RangePartitioner 区别

    Spark RDD的宽依赖中存在Shuffle过程,Spark的Shuffle过程同MapReduce,也依赖于Partitioner数据分区器,Partitioner类的代码依赖结构主要如下所示: ...

  8. 架设WIN32汇编程序的开发环境

    笔者在学习Windows下的图形界面应用程序(GUI,Graphical User Interface)的时候碰到的第一个麻烦就是架设WIN32汇编程序的开发环境,在这里笔者愿意和大家分享这段经历. ...

  9. python 库安装笔记

    python 库安装笔记 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-2-22 友情提示 安装python库的过程中 ...

  10. Omi实战-QQ附近用户列表Web页

    原文地址https://github.com/AlloyTeam/omi/blob/master/docs/cn_pr_nearby.md 写在前面 Omi很适合大型复杂的Web页面开发,例如一些We ...