CODEWITHSUNDEEP
javascriptjqueryjquery-selectorssvgxml-namespaces
ram1
ram1

Reputation: 6470

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 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() {
});

Upvotes: 1

Views: 263

Answers (2)

BoltClock
BoltClock

Reputation: 724342

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.

Upvotes: 1

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

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

Upvotes: 1

Related Questions