使用$ .delegate()在命名空间中选择元素

时间:2011-05-01 17:19:34

标签: javascript jquery jquery-selectors svg xml-namespaces

我正在内联一个有文本元素的外部svg。我希望text元素的内容镜像页面中的文本字段。如果用户编辑文本字段,则应更新svg中的文本元素,反之亦然。我使用$ .bind()工作了。

用户可以选择不同的svg。原始的svg被删除并加载一个新的。文本元素在两个svgs中,它只是一个不同的图形。

所以我真的需要$ .delegate()而不是$ .bind()。我该如何编写这种语法?这不起作用:

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

这两个都没有:

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

2 个答案:

答案 0 :(得分:1)

由于jQuery的选择器引擎Sizzle不支持XML命名空间,因此您可以通过转义将冒号视为元素名称的一部分:

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

两个反斜杠,因为第一个在JavaScript中转义第二个反斜杠。然后,转义的反斜杠转义为jQuery选择器的冒号。

答案 1 :(得分:1)

您的代码似乎是正确的,假设您编写'svg'和'text'选择器用于解释目的。你确定你写了你的选择器吗? 不应该是:

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

或者text / svg是类名还是ID? 希望这有帮助