javascript - 如何正确转义这个函数？

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,">

执行“鼠标悬停”会生成一个空白文档。

如何对此函数进行正确的转义？

更新:

这应该有效:

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

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

Answer 1

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

因此，请使用 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);