Select Element in a Namespace using $.delegate()

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 开发者_Go百科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() {
});

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.

Your code seems to be right, assuming you wrote 'svg' and 'text' selectors for explaining purposes. Are you sure you wrote your selectors right? Shouldn't it have been:

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

or maybe text/svg are class names or ids? Hope this helps