Question

作为div覆盖的一部分，我编写了一些代码来制作按钮。该函数接受一个对象

    function f1(marker){
    var notesBox = '<div id="saveMarkerNotesDiv'+marker.id+'"> <input type="button" onclick="saveMarkerNotes(\''+ marker+'\')" id="saveMarkerNotes'+marker.id+'" value="Save" /> </div>';
return notesBox;
    }

function saveMarkerNotes(marker){
 alert(marker);
//Just shows [object Object]
alert(marker.id);
//Above line throws an error as it cannot find id in the **string marker**. 
}

问题是为什么我转义后变成字符串。另外我在以前的方法f1中使用了相同的对象，并且在这里工作正常。调用上述f1函数时，它具有对象标记。我可以在该方法中访问标记的属性和属性。

上面的函数f1具有标记对象。但是，当调用函数saveMarkerNotes（）时，似乎不再具有该对象。当我在saveMarkerNotes（）中打印marker.id时，它显示未定义，而当我在警报中显示标记对象时，它显示为[object Object]。我觉得在onclick =“ saveMarkerNotes（\''+ marker +'\'）”代码中，标记对象正在变成字符串，不再是对象。我该如何转义字符串以使其保留为对象而不是字符串。

Answer 1

使用DOM API生成DOM元素（<div>等），并使用Javascript以编程方式将事件处理程序附加到它们。请勿将字符串解释为HTML，后者会将元素附加到DOM，而DOM最终会从字符串中再次触发Javascript。

let input = document.createElement('input');
input.type = 'button';
input.id = 'saveMarkerNotes' + marker.id;
input.value = 'Save';
input.addEventListener('click', saveMarkerNotesDiv.bind(null, marker));

let div = document.createElement('div');
div.id = 'saveMarkerNotesDiv' + marker.id;
div.appendChild(input);

return div;

您现在需要.appendChild(div)到某个元素才能将其添加到页面中。是的，这似乎比较冗长和烦人，但这是正确的方法。

转义Javascript字符串

1 个答案: