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

我有以下jQuery/Javascript代码片段。此代码段旨在插入一个新的

div

元素作为页面上已存在的DOM元素的子元素。

div

元素包含一个文本标签“myLabel”。当有人单击“myLabel”时，我希望它使用两个参数调用

myFunction

：一个JSON对象和一个DomeElement

$(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>";
});

$（文档）.ready（函数（）{
//MyDomeElement是通过document.getElementById（）获取的DOM对象
//myFunction是在别处定义的Javascript函数
myJSONObject={“你好”：“世界”}；
var newDiv=document.createElement（'div'）；
setAttribute（“id”、“myNewDivID”）；
newDiv.innerHTML=“myLabel”；
});

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

问题在于我将

myJSONObject

和

myDOMElement

传递到

myFunction

的方式

在

myFunction

中，它们分别被打印为字符串“

[object object]

”和“

[object htmldevelment]

”。显然，这是因为我在函数调用的括号内插入了一个引号。但是如果我删除这些单引号，那么它就不起作用了，因为

onclick

的定义现在包含语法错误

---

我如何围绕这个问题转义字符串或解析/反解析，以便在

myFunction

中操作

mydomeElement

和

myJSONObject

？

显然您在使用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) );
});

$（文档）.ready（函数（）{
var myJSONObject={“Hello”：“World”}；
var newDiv=$（''，{id:'myNewDivID'}），
var span=$（''，{id:'mySpanID'，text:'myLabel'}）；
span.on（'click'，function（）{
//在这里使用myJSONObject和“this”
});
$（'#target_element'）.append（newDiv.append（span））；
});

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

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);
});

没有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);
});

---

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

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);
});