Question

function test() {
    var id = 123;
    var id12 = 'abcd';
    var childDiv = "";
    childDiv += '<div style="width:20px;height:20px"  onclick="newsClicked('+id12+')">Click</div>';  

    $("#mydiv").append(childDiv);

}

function newsClicked(param) {
    alert(param);
}

Above is the test function, test() is the function which I call inside onClick event of a test div. If I pass id which is a number(integer) it works, If I pass
string it says reference error. Its related to closure I guess. How to solve it.
Whats happening actually here ?

Answer 1

Change:

childDiv += '<div style="width:20px;height:20px" onclick="newsClicked('+id12+')">Click</div>';  

to

childDiv += '<div style="width:20px;height:20px" onclick="newsClicked(\''+id12+'\')">Click</div>';  

When you append childDiv 1st one to div with integer as parameter the result will be:

<div style="width:20px;height:20px"  onclick="newsClicked(3)">Click</div>

which is correct, in case of string the result will be:

<div style="width:20px;height:20px"  onclick="newsClicked(string_as_arg)">Click</div>

this is not ok, because string_as_arg is not a variable at last not in the scope. That’s why you should enclose it in apostrophes. Then the proper results will be:

<div style="width:20px;height:20px"  onclick="newsClicked('3')">Click</div>
<div style="width:20px;height:20px"  onclick="newsClicked('string_as_arg')">Click</div>

so there is no really big difference in case of integer constant but string now is properly recognised as string not as variable.