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,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
随机推荐
- Binder学习笔记(六)—— binder服务端是如何组织addService数据的
在checkService的调查中我们知道客户端向ServiceManager请求服务名,ServiceManager根据服务名遍历本地链表,找到匹配的handle返回给客户端.这个handle显然是 ...
- Android下创建一个输入法
输入法是一种可以让用户输入文字的控件.Android提供了一套可扩展的输入法框架,使得应用程序可以让用户选择各种类型的输入法,比如基于触屏的键盘输入或者基于语音.当安装了特定输入法之后,用户即可在系统 ...
- Schema技术
Schema 技术 Schema 是 DTD 的代替者,名称为 XML Schema,用于描述XML 文档结构,即对XML文档做出规范,比 DTD 更加强大,最主要的特征之一就是XML Schema ...
- python解决最小二乘法的相关问题笔记。
计算最小二乘法求目标函数的系数,部分代码来源于张若愚老师的<Python科学计算> 题目 某检测装备输入数据: x:0.9, 2.5, 3.3, 4.5, 5.7, 6.9 g:1.1, ...
- JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
- 5分钟构建无服务器敏感词过滤后端系统(基于FunctionGraph)
摘要:开发者通过函数工作流,无需配置和管理服务器,以无服务器的方式构建应用,便能开发出一个弹性高可用的后端系统.托管函数具备以毫秒级弹性伸缩.免运维.高可靠的方式运行,极大地提高了开发和运维效率,减小 ...
- [TJOI2013]松鼠聚会 BZOJ 3170
题目描述 草原上住着一群小松鼠,每个小松鼠都有一个家.时间长了,大家觉得应该聚一聚.但是草原非常大,松鼠们都很头疼应该在谁家聚会才最合理. 每个小松鼠的家可以用一个点x,y表示,两个点的距离定义为点( ...
- Flashcache的 KEEP属性自动失效
如果希望一个数据对象长期地缓存在flashcache中,则可以手动地将该数据对象的CELL_FLASH_CACHE属性设置为"keep". 其实需要说明的是,但不是数据对象的CEL ...
- linux学习五
一.系统服务管理 1.概念 服务(service) 本质就是进程,但是是运行在后台的,通常都会监听某个端口,等待其它程 序的请求,比如(mysql , sshd 防火墙等),因此我们又称为守护进程,是 ...
- Linux网络编程基础
1. Linux网络模型 ① OSI七层模型和Linux四层模型 ② 各种协议之间的关系及在Linux模型中的位置 ③ 协议封装:各种协议处于一种层层封装的关系 (1)Ethernet (2)IP * ...