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

我有一个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元素：

---

此代码不起作用，因为绑定时模板不存在。有没有其他方法可以用jQuery解决这个问题？我尝试使用.live而不是.bind，但在这种情况下没有帮助。

我看到的问题是，$'templine'是一个jQuery对象，因此没有setAttributeNS方法

请尝试以下方法：

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

两种选择：

处理程序检查“模板行”是否存在，如果不存在，则不执行任何操作。 在第二个处理程序底部创建templine之前，不要安装该处理程序 另外，不要连续两次调用$'templine'，请将结果保存在变量中。

尝试以下操作：

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

不，如果这是你的问题，还有其他问题。对可能影响性能的每个事件，$'templine'都会一次又一次地执行。为什么您认为这是问题所在，而不是其他问题？我从您的代码中猜测将有多个templine元素，因此请使用class属性而不是id属性。顺便说一下：svgcanvas/click函数的最后7行可能是$line.attr'id'，templine.attr'x1'，points[0].x.attr'y1'，points[0]的缩写.y.attr'x2'，e.pageX.attr'y2'，e.pageY.attr'style'，笔划：rgb100100100'，附在“canvase”之后；我相信。如果jQuery在svg上的行为不奇怪…@yankee:我希望在每个mousemove事件上执行$'templine'，因为当鼠标移动时，行应该改变。所以我认为这是对的。在您的建议之后，我将尝试缩短我的代码，谢谢。@waitinforantrain:这段代码很简单，我只会在第一次单击时创建一个id为templine的元素。很好，但这不是您提到的问题OP@Juan：是的。因为绑定时模板不存在，所以不正确。事件绑定到$'svgcanvas'，它已经存在，所以这很好。当函数运行时，$'templine'将返回一个jQuery对象。如果元素不存在，它可能为空，但它仍然是一个有效的jQuery对象。jQuery对象没有setAttributeNS。不要这样认为，只有单击svgcanvas才能创建模板。您不必再次解释OP试图调用jQuery对象上的HtmleElement方法。@Juan:模板行存在与否有什么关系？如果您试图在空jQuery对象上调用函数，那么它什么也做不了。如果你调用一个不存在的函数，它会抛出一个错误并崩溃。@Rocket:Wow，我完全错过了。您可能想建议使用attr而不是setAttributeNS…您应该包括Rocket的建议：$…[0]。SetAttribute…值得注意的一点。在发布我的答案后，我注意到了这一点。为了提高性能，我只使用line.setAttributeNS，而不是在每次鼠标移动时两次查询DOM！很明显，今天我的思维没有达到最佳状态！再次更新！

$('#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);
    });
});