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,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
随机推荐
- WGestures鼠标手势快捷手势介绍
1.官方网站 WGestures 2.快截图 3.自定义快捷键列表
- poj3167(kmp)
题目链接: http://poj.org/problem?id=3167 题意: 给出两串数字 s1, s2, 求主串 s1 中的 s2 匹配数并输出每个匹配的开头位置. 区间 [l, r] 是 s2 ...
- Html再学
1. Html是网页的载体.内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字.图片.视频等. 2. CSS样式是展现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边 ...
- Generic detail view PostDetailView must be called with either an object pk or a slug.解决
Django 使用DetailView有这个问题,url,和模板统一调用模型时,用pk,而不是id 如果不是用DetailView,只是简单的视图,则用pk 或者id都可以. urls.py: url ...
- Jenkins+Git+Maven+Nexus+Tomcat
https://www.jianshu.com/p/d24e64559440 https://blog.csdn.net/u013322876/article/details/72637854 htt ...
- Java技术列表
完整的java技术列表,可以在oracle官网找到: https://www.oracle.com/technetwork/java/javaee/tech/index.html JSR: Java ...
- P2896 [USACO08FEB]一起吃饭Eating Together
传送门 可以考虑DP 设 f [ i ] [ 1/2/3 ] [ 0/1 ] 表示当前考虑到第 i 头牛,打算让当前位置的编号变成 1/2/3,并且打算让整段序列上升/下降 0/1 然后就对每种情况慢 ...
- 江西财经大学第一届程序设计竞赛 C
链接:https://www.nowcoder.com/acm/contest/115/C来源:牛客网 题目描述 决赛圈还剩下两个人,“伏地魔”XDD和跑毒进圈的FZL,XDD拿着狙击枪AWM瞄准并准 ...
- day_07 深浅拷贝
1. 基础数据类型的补充 1字符串的操作: 1.join 把字符串或者列表的的内拼接,拼接成字符串 和split相反--把字符串转换成列表 2.删除 字典和列表在循环中是不能进行删除的,可以在循环中把 ...
- ButterKnife 8.4注入失败
1,第一步:项目的gradle中增加 classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'buildscript { repositor ...