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. javascript实现页面滚屏效果

    当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析.本示例在页面右侧有五个数字标签,代表五个 ...

  2. DTLS 技术要点解析

    一.DTLS DTLS 是指 Datagram Transport Level Security,即数据报安全传输协议: 其提供了UDP 传输场景下的安全解决方案,能防止消息被窃听.篡改.身份冒充等问 ...

  3. Python学习--15 日期和时间

    获取当前时间 # coding: utf-8 from datetime import datetime now = datetime.now() print(now) print(now.strft ...

  4. GoldenGate 传统抽取进程的 ADG 模式

    :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...

  5. HDU 3785 寻找大富翁

    寻找大富翁 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  6. Java数据类型转换浅析

    Java数据类型转换分为两种:自动类型转换和强制类型转换. 数据类型转换的关键是数据类型相应的表数范围大小 1.自动类型转换: 概念:小范围数据类型会自动转化成大范围数据类型 实例: int a=10 ...

  7. 应用 EditPlus 配置 Java 编译环境

    此文全文摘抄自: http://jingyan.baidu.com/album/37bce2be3ceef61002f3a208.html?picindex=7,谢啦 应用成功: EditPlus(文 ...

  8. php单例模式与工厂模式

    单例模式:单例模式又称为职责模式,它用来在程序中创建一个单一功能的访问点,通俗地说就是实例化出来的对象是唯一的. 所有的单例模式至少拥有以下三种公共元素:1. 它们必须拥有一个构造函数,并且必须被标记 ...

  9. jQuery动态生成不规则表格前后端

    一.需求:有这么一张表 前四个属性当作联合主键 需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVers ...

  10. windows下部署免费ssl证书(letsencrypt)

    随着网络的发展,网络安全也越来越重要,对于网站来说,从Http升级到https也是我们要做的首要事情.要实现https,首先我们需要申请一张SSL证书,这篇文章我主要介绍下边这几个方面: 1. SSL ...