Question

我有一个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()，但在这种情况下没有用。

Answer 1

我可以看到的问题是$('#templine')是一个jQuery对象，因此没有setAttributeNS方法。

请改为尝试：

$('#templine').attr("x2", e.pageX);
$('#templine').attr("y2", e.pageY);

Answer 2

试试这个：

$('#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的建议也是有效的。更新我的回答......

Answer 3

两个选项：

处理程序检查'#templine'是否存在，如果不存在，则不执行任何操作。
在创建#templine（在第二个处理程序的底部）

此外，请勿连续两次调用$('#templine')，将结果保存在变量中。

如何使用jQuery选择将来存在的元素？

3 个答案: