Как я могу выбрать элемент, который будет существовать в будущем с jQuery?

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

Попробуйте это:

$('#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 2

Проблема, которую я вижу, состоит в том, что $('#templine') является объектом jQuery и поэтому не имеет метода setAttributeNS.

Попробуйте вместо этого:

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

Answer 3

Два варианта:

• Обработчик проверяет, существует ли '#templine', если нет, то ничего не делает.
• Не устанавливайте обработчик, пока не создадите #templine (внизу вашего второго обработчика)

Кроме того, не вызывайте $('#templine') дважды подряд, сохраните результат в переменной.