Question

我有一个从jQuery生成的DIV标记，如下所示：

$('#results')
 .append('<DIV id='
 + A.pid
 + ' onmouseover=function(){google.maps.event.trigger(marker, 'mouseover');};><H3>'
 + A.name
 + '</H3></DIV>');

Firebug在列表之后给出了“缺失”参数错误，因为它在)之后无法识别'mouseover'。

在\'mouseover\'鼠标悬停时执行DIV会产生语法错误。语法错误如下： function（）{google.maps.event.trigger（marker，）并查看生成的DIV显示：

<div id="1" 'mouseover');};="" onmouseover="function(){google.maps.event.trigger(marker,">

执行"mouseover"会生成空白文档。

如何正确逃避此功能？

更新

这应该有效：

$('#results') .append('<DIV id=' + A.pid + ' onmouseover=\"function(){google.maps.event.trigger(marker, \'mouseover\');};\"><H3>' + A.name + '</H3></DIV>');

我需要为函数添加转义双引号并转义参数的单引号。

Answer 1

您正在使用HTML将数据放入JS中的JS中。每个级别的封装都需要字符串转义，否则带外字符将导致错误并可能导致安全漏洞。人脑不善于跟踪多个嵌套的字符串封装级别。

因此，使用jQuery的元素创建快捷方式在新div上设置属性，并使用事件处理功能向其添加侦听器，而不是弄乱丑陋和不安全的HTML字符串黑客攻击：

var div= $('<div>', {id: A.pid}).append($('<h3>', {text: A.name}));
div.mouseover(function() {
    google.maps.event.trigger(marker, 'mouseover');
});
$('#results').append(div);

Answer 2

你需要“围绕你的html属性的值。否则浏览器会认为属性在下一个空白处结束，而且恰好在(marker,部分之后。

$('#results')
 .append('<DIV id="'
 + A.pid + '"'
 + ' onmouseover="function(){google.maps.event.trigger(marker, \'mouseover\');};"><H3>'
 + A.name
 + '</H3></DIV>');

如何正确逃离此功能？

2 个答案: