JS动态创建SVG元素并绑定事件
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "");
svg.setAttribute("height", "");
svg.addEventListener("load", function () { alert('loaded'); });
document.body.appendChild(svg);
以上代码可创建SVG容器并追加到body元素下,如果要添加元素,使用以下代码:
var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("fill", "#120045");
r.setAttribute("x", "");
r.setAttribute("y", "");
r.setAttribute("width", "50%");
r.setAttribute("height", "50%");
r.addEventListener("click", function () { alert('clicked'); });
svg.appendChild(r);
JS动态创建SVG元素并绑定事件的更多相关文章
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- js动态添加的元素不能绑定事件
动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})
- js动态创建的元素绑定事件
新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("can ...
- js动态追加的元素如何触发事件
一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...
- 【原生js】js动态添加dom,如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效
最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖 npm install flatpickr --save 随后在页面中引入css ...
- jq动态添加的元素触发绑定事件无效
<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...
- 使用addeventlistener为js动态创建的元素添加事件监听
点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul> ...
- JS动态添加的标签无法绑定事件解决方案~~~
今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
随机推荐
- PS2018学习笔记(03-18节)
3-认识主界面 # 主界面包括: 菜单栏.选项栏.工具栏.面板.图像编辑窗口(中间)和状态栏(底部): # 界面设置: 方法1:Ctrl+k:打开界面设置; 方法2:编辑-首选项-界面 # shift ...
- oracle 多表连接查询 join(一)
一.简介: 多表连接查询通过表之间的关联字段,一次查询多表数据. 下面将依次介绍 多表连接中的如下方法: 1.from a,b 2.inner join 3.left outer join 4.rig ...
- hdu4658(广义五边形&分割函数2)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4658 题意:f(x) 为将 x 分成其他数和的形式的方案数.对于 t 组输入,输出 f(xi, k), ...
- ubuntu不能自windows拖拽文件解决办法
由虚拟机的安装更新所致,及时安装更新vmware tools 命令:tar -xzvf VMwareTools-10.0.6-3595377.tar.gz进入解压后的目录,执行:sudo ./wmw ...
- 9.27下午考试(Nescafé 29杯模拟赛)
140pts(100+30+10)Rank3 前几天还考了一场,AK,没什么好总结的,所以就没写博客. 炸: T2,模拟退火突然不会了,写个状压dp,排序边的时候sort的N而不是M. 这个坑经常出! ...
- C++基础学习5:强制类型转换
在C++语言中新增了四个关键字static_cast.const_cast.reinterpret_cast和dynamic_cast.这四个关键字都是用于强制类型转换的.我们逐一来介绍这四个关键字. ...
- CF959E Mahmoud and Ehab and the xor-MST 思维
Ehab is interested in the bitwise-xor operation and the special graphs. Mahmoud gave him a problem t ...
- shell控制流程
#!/bin/bash #存储为a.sh == ] then #参数正确,返回0 else #参数错误,返回1 fi #!/bin/bash #存储为b.sh echo $? $ . ./a.sh $ ...
- Solr学习笔记(1) —— Solr概述&Solr的安装
一.概述 使用Solr实现电商网站中商品信息搜索功能,可以根据关键字.分类.价格搜索商品信息,也可以根据价格进行排序. 1.1 实现方法 在一些大型门户网站.电子商务网站等都需要站内搜索功能,使用传统 ...
- Diophantus of Alexandria
Diophantus of Alexandria was an egypt mathematician living in Alexandria. He was one of the first ma ...