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

Question

I have the following jQuery/Javascript code snippet. This snippet is intended to insert a new div element as a child of a DOM Element that already exists on the page. The div element contains a text label "myLabel". When someone clicks on "myLabel", I would like it to call myFunction with two parameters: one JSON object and one 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>";
});

This code doesn't work when I click on "myLabel".

The problem lies in the way I am passing in myJSONObject and myDOMElement to myFunction .

In myFunction they get printed out as the strings " [object Object] " and " [object HTMLDivElement] " respectively. Obviously this is because of the single-quote I have inserted just inside the parenthesis in the call to the function. But if I remove those single quotes, then it doesn't work because the definition of onclick now contains syntax errors.

How can I escape strings or parse/de-parse around this issue so that I can manipulate myDOMElement and myJSONObject in myFunction ?

Answer 1

You're obviously using jQuery, so use it

$(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

You can attach the click handler dynamically, that is:

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

Calling myFunction.bind() returns a new function with the arguments to myFunction preset. The first argument to bind is what this will be set to, but because jQuery will (I think) use call to call the event handler, it doesn't really matter.

If you want access to the event as well, you can add a accept another argument to myFunction , ie:

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

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