Выберите элемент в пространстве имен, используя $ .delegate ()

Question

Я вставляю внешний svg с текстовым элементом.Я хочу, чтобы содержимое текстового элемента зеркально отображало текстовое поле со страницы.Если пользователь редактирует текстовое поле, он должен обновить текстовый элемент в svg, и наоборот.У меня это работает, используя $ .bind ().

Пользователь может выбрать другой svg.Исходный svg удаляется, а новый загружается. Текстовый элемент находится в обоих svgs, это просто другой рисунок.

Так что мне действительно нужно $ .delegate (), а не $ .bind ().Как мне написать этот синтаксис?Это не работает:

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

Также не работает:

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

Answer 1

Ваш код кажется правильным, если вы написали селекторы 'svg' и 'text' для объяснения целей. Вы уверены, что написали свои селекторы правильно? Не должно было быть:

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

или, может быть, text / svg - это имена классов или идентификаторы? Надеюсь, это поможет

Answer 2

Поскольку механизм выбора jQuery Sizzle не поддерживает пространства имен XML, вы можете просто рассматривать двоеточие как часть имени элемента, экранируя его:

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

Два обратных слеша, потому чтопервый избегает второго в JavaScript.Затем экранированный обратный слеш экранирует двоеточие для селектора jQuery.