我有一个SVG,我将添加元素。在mousemove
上,这些元素应该移动,所以我想选择将来存在的元素:
// #svgcanvas exist always
// #templine will exist in the future
$('#svgcanvas').bind('mousemove', function(e) {
$('#templine').setAttributeNS(null, "x2", e.pageX);
$('#templine').setAttributeNS(null, "y2", e.pageY);
});
以下是在#templine
事件中创建的click
元素:
$('#svgcanvas').bind('click', function(e) {
var line = document.createElementNS(xmlns, "line");
line.setAttributeNS(null, "id", "templine");
line.setAttributeNS(null, "x1", points[0].x);
line.setAttributeNS(null, "y1", points[0].y);
line.setAttributeNS(null, "x2", e.pageX);
line.setAttributeNS(null, "y2", e.pageY);
line.setAttributeNS(null, "style", "stroke:rgb(100,100,100)");
document.getElementById('canvas').appendChild(line);
});
此代码无效,因为绑定时#templine
不存在。有没有其他方法可以用jQuery解决这个问题?我尝试使用.live()
代替.bind()
,但在这种情况下没有用。
答案 0 :(得分:3)
我可以看到的问题是$('#templine')
是一个jQuery对象,因此没有setAttributeNS
方法。
请改为尝试:
$('#templine').attr("x2", e.pageX);
$('#templine').attr("y2", e.pageY);
答案 1 :(得分:3)
试试这个:
$('#canvas').bind('click', function(e) {
var line = document.createElementNS(xmlns, "line");
line.setAttributeNS(null, "id", "templine");
line.setAttributeNS(null, "x1", points[0].x);
line.setAttributeNS(null, "y1", points[0].y);
line.setAttributeNS(null, "x2", e.pageX);
line.setAttributeNS(null, "y2", e.pageY);
line.setAttributeNS(null, "style", "stroke:rgb(100,100,100)");
document.getElementById('canvas').appendChild(line);
$('#svgcanvas').bind('mousemove', function(e) {
line.setAttributeNS(null, "x2", e.pageX);
line.setAttributeNS(null, "y2", e.pageY);
});
});
另外,@ Rocket的建议也是有效的。更新我的回答......
答案 2 :(得分:0)
两个选项:
此外,请勿连续两次调用$('#templine')
,将结果保存在变量中。