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的定义现在包含语法错误。

如何绕过此问题转义字符串或解析/解析，以便我可以操纵myDOMElement中的myJSONObject和myFunction？

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

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

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

2 个答案: