У меня есть svg с элементами, к которым я привязываю клики и нажатия клавиш. Если пользователь редактирует текстовое поле на странице, он обновляет соответствующий текстовый элемент в svg. И наоборот, если пользователь редактирует svg, он обновляет соответствующее текстовое поле в html. Использование jQuery.
Кнопка на странице позволяет пользователю удалить svg из DOM и добавить другой svg вместо него (асинхронно). Этот новый svg имеет те же элементы, что и первый, но имеет другой графический дизайн.
После загрузки этого второго svg привязки перестают работать. Я переинициализирую все - отмену привязки и повторную привязку - вызывая AB.init () ниже, но пользователь не может редактировать svg. Как мне это исправить?
ОБНОВЛЕНИЕ: все .bind () теперь являются .delegate () для комментария @ Pointy. Однако проблема сохраняется. Мой синтаксис .delegate () действителен для пространства имен?
AB = {
svgns: "http://www.w3.org/2000/svg"
f: {
field1: {svg:null, jq:null},
field2: {svg:null, jq:null}
},
/* last activated text field */
active: undefined,
init: function() {
AB.f.field1.jq = $('#id_field_1');
AB.f.field2.jq = $('#id_field_2');
var svg_container = document.getElementById('svg_container');
var svg_text_elements = svg_container.getElementsByTagNameNS(svgns, 'text');
var length = svg_text_elements.length;
for(var i=0; i < length; i++) {
var e = svg_text_elements[i];
if(e.id) {
AB.set_svg_for_text_field(e);
} else {
var tspans = e.getElementsByTagName('tspan');
for(var j = 0; j < tspans.length; j++) {
var t = tspans[j];
AB.set_svg_for_text_field(t);
}
}
}
AB.delegate_and_display_text_fields();
},
delegate_and_display_text_fields: function() {
a = [];
$.each(AB.f, function(key, value) {
if(value.svg && value.jq){
$('form').delegate('input', 'keyup click', function() {
value.svg.textContent = value.jq.val();
CB.set_active_element(key);
CB.active = value;
});
$('#svg_container svg').delegate('text', 'keyup click', function() {
value.svg.textContent = value.jq.val();
CB.set_active_element(key);
CB.active = value;
});
if(value.jq.val()) {
value.svg.textContent = value.jq.val();
}
a.push(value);
value.jq.parent().fadeIn();
}
});
},
set_svg_for_text_field: function(e) {
switch(e.id) {
case "field_1":
AB.f.field1.svg = e;
break;
case "field_2":
AB.f.field2.svg = e;
break;
}
},
...