javascript - 如果生成代码，如何将 DOM 元素和 JSON 对象传递给 JavaScript 函数？

Question

我有以下 jQuery/Javascript 代码片段。此代码片段旨在插入一个新的 div 元素作为页面上已存在的 DOM 元素的子元素。 div 元素包含一个文本标签“myLabel”。当有人点击“myLabel”时，我希望它使用两个参数调用 myFunction:一个 JSON 对象和一个 DOMElement。

$(document).ready(function() {
    // myDOMElement is a DOM object acquired by doing document.getElementById()
    // myFunction is a Javascript function defined elsewhere
    myJSONObject = {"Hello": "World"};
    var newDiv = document.createElement('div');
    newDiv.setAttribute("id", "myNewDivID");
    newDiv.innerHTML = "<span id=\"mySpanID\" onclick=\"myFunction('" + myJSONObject +"', '" + myDOMElement + "');\">myLabel</span>";
});

当我点击“myLabel”时，此代码不起作用。

问题在于我将 myJSONObject 和 myDOMElement 传递给 myFunction 的方式。

在 myFunction 中，它们分别打印为字符串“[object Object]”和“[object HTMLDivElement]”。显然，这是因为我在函数调用的括号内插入了单引号。但如果我删除这些单引号，那么它就不起作用，因为 onclick 的定义现在包含语法错误。

如何围绕此问题转义字符串或解析/反解析，以便可以在 myFunction 中操作 myDOMElement 和 myJSONObject？

Answer 1

你显然正在使用 jQuery，所以使用它

$(document).ready(function() {
    var myJSONObject = {"Hello": "World"};
    var newDiv = $('<div />',  {id : 'myNewDivID'}),
    var span   = $('<span />', {id : 'mySpanID', text : 'myLabel'});

    span.on('click', function() {
        // use myJSONObject and "this" here
    });

    $('#target_element').append( newDiv.append(span) );
});