Question

I am inlining an external svg that has a text element. I want the content of the text element to mirror a text field from the page. If the user edits the text field, it should update the text element in the svg, and vice versa. I’ve got this working using $.bind().

The user can select a different svg. The original svg gets removed and a new one loads in. The text element is in both svgs, it’s just a different graphic.

So I really need $.delegate() not $.bind(). How do I write that syntax? This doesn’t work:

$('#svg_container').delegate('svg text', 'keyup click', function() {
});

Neither does this:

$('#svg_container').delegate('text', 'keyup click', function() {
});

Answer 1

As jQuery’s selector engine Sizzle doesn’t support XML namespaces, you can simply treat the colon as part of the element name by escaping it:

$('#svg_container').delegate('svg\\:text', 'keyup click', function() {
});

Two backslashes because the first escapes the second in JavaScript. Then the escaped backslash escapes the colon for the jQuery selector.