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

Posted 2023-02-22

【中文标题】如果生成代码，如何将 DOM 元素和 JSON 对象传递给 JavaScript 函数？

【英文标题】：How to pass DOM element and JSON object to JavaScript function if the code is generated?

【发布时间】：2014-06-17 10:30:01

【问题描述】：

我有以下 jQuery/javascript 代码 sn-p。这个 sn-p 旨在插入一个新的 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？

【问题讨论】：

您可以尝试动态附加点击处理程序，并使用常规 JS 函数？

【参考方案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) );
);

【参考方案2】：

您可以动态附加点击处理程序，即：

function myFunction(jsonObject, element) 
    console.log(jsonObject);
    console.log(element);

$(document).ready(function() 
    myJSONObject = "Hello": "World";
    var newDiv = $('<div id="myNewDivID"/>');
    var span = $('<span id="mySpanID">');
    span.text('myLabel');
    span.on('click', myFunction.bind(undefined, myJSONObject, 'this would be the element'));
    newDiv.append(span);
);

调用myFunction.bind() 会返回一个新函数，该函数带有myFunction 预设的参数。 bind 的第一个参数是 this 将被设置的，但因为 jQuery 将（我认为）使用 call 来调用事件处理程序，这并不重要。

如果您也想访问该事件，您可以向myFunction 添加一个接受另一个参数，即：

function myFunction(jsonObject, element, event) 
    // Do things.

没有 jQuery：

function myFunction(jsonObject, element) 
    console.log(jsonObject);
    console.log(element);

$(document).ready(function() 
    myJSONObject = "Hello": "World";
    var div = document.createElement('div');
    div.setAttribute('id', 'myNewDivId');
    var span = document.createElement('span');
    span.setAttribute('id', 'mySpanId');
    span.innerText = 'words'; // or textContent?
    span.addEventListener('click', myFunction.bind(window, myJSONObject, 'this would be the element'));
    div.appendChild(span);
);