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. Spark:控制日志输出级别

    Spark:控制日志输出级别 终端修改 在pySpark终端可使用下面命令来改变日志级别 sc.setLogLevel("WARN") # 或者INFO等 修改日志设置文件 ** ...

  2. （五）Hololens Unity 开发之 手势识别

    学习源于官方文档 Gestures in Unity 笔记一部分是直接翻译官方文档,部分各人理解不一致的和一些比较浅显的保留英文原文 (五)Hololens Unity 开发之 手势识别 HoloLe ...

  3. oracle_角色

    一. 每个Oracle用户都有一个名字和口令,并拥有一些由其创建的表.视图和其他资源. Oracle角色(role)就是一组权限(privilege) (或者是每个用户根据其状态和条件所需的访问类型) ...

  4. Struts1文件上传、单文件、多文件上传【Struts1】

     将struts1文件上传的操作汇总了一下,包括单文件上传和多文件上传,内容如下,留作备忘: Struts2实现文件上传的文章(http://blog.csdn.net/itwit/article/d ...

  5. 面试之MySQL基本命令

    既然要操作数据库就从数据库链接写起,包括建库.建表.增删该查字段及约束,删库,删表的数据,以下主要是对我以往面试的总结,欢迎补充! 一.数据库连接 1.连接本机(p和密码123456之间无空格) my ...

  6. Error:(2, 0) Plugin with id 'com.github.dcendents.android-maven' not found. <a href="openFile:I:\API\PermissionGen-master\permissiongen\build.gradle">Open File</a>

    不上图说个*** 报这个错的原因是因为 你在project中的build.gradle 少写了两句话 所以报这个错 你只需要在build.gradle中添加 classpath 'com.github ...

  7. 制作 OpenStack Linux 镜像 - 每天5分钟玩转 OpenStack（151）

    这是 OpenStack 实施经验分享系列的第 1 篇. OpenStack 的 instance 是通过 Glance 镜像部署的,所以准备镜像是必须要做的工作.本节介绍 Linux 镜像的制作方法 ...

  8. C++ 头文件系列(ios)

    1 简介 我们都知道,平时常用的那些标准流,诸如iostream.ofstream.ifstream等等,其实都是对应的basic_XXX模版的实例类. 而这些basic_XXX类模版又都是继承自同一 ...

  9. Raspberry树莓派学习笔记2—配置RobotFramework自动化测试环境

    一般RobotFramework都是安装在Windows/Linux的PC机上,这里将简单介绍在树莓派硬件平台上配置RobotFramework的开发和运行环境. 树莓派上配置了自动化测试软件,可以考 ...

  10. asp.net core mvc剖析：路由

    在mvc框架中,任何一个动作请求都会被映射到具体控制器中的方法上,那框架是如何完成这样一个过程的,现在我们就来简单分析下流程. 我们紧跟上面的主题,任何一个请求都会交给处理管道进行处理,那mvc处理的 ...