Question

I have an SVG that I will add elements to. And on mousemove this elements should move, so I want to select the elements that exist in the future:

// #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);
});

Here are the #templine element created on a click event:

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

This code is not working, because #templine doesn’t exist at the time of binding. Is there any other way I can solve this with jQuery? I have tried to use .live() instead of .bind() but that didn’t help in this case.

Answer 1

The problem I can see is that $('#templine') is a jQuery object, and therefore doesn’t have the setAttributeNS method.

Try this instead:

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