JavaScript function call inside inner.html

Question

I have this html code with external function call and local variables:

document.getElementById("data").innerHTML='<a href="#" onClick="cordova.exec("ChildBrowserCommand.showWebPage", "'+vivijesolo+'");"><img src="'+vivifoto+'" on;></a>';

The problem is that, it see's the variables and everthing is fine but the function cordova.exec can't be executable.

Why?? :(

The `"` is breaking the `onClick` attribute. it will only see `onClick="cordova.exec("` and then stop because the quote ends it — Esailija, Jul 23 '12 at 13:23
var func='cordova.exec("ChildBrowserCommand.showWebPage", "'+vivijesolo+'");'; document.getElementById("data").innerHTML=''; try this, if it works, you need to change the way you use quotes. — CosminO, Jul 23 '12 at 13:28
violation of [soc](http://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_and_JavaScript) — jbabey, Jul 23 '12 at 13:29

score 2 · Answer 1 · answered Jul 23 '12 at 13:26

2

The " is breaking the onClick attribute. it will only see onClick="cordova.exec(" and then stop because the quote ends it

Try this

var elem = document.getElementById("data");
elem.innerHTML = '<a href="#"><img src="'+vivifoto+'"></a>';

elem.firstChild.onclick = function() {
    cordova.exec( "ChildBrowserCommand.showWebPage", vivijesolo );
};

answered Jul 23 '12 at 13:26

Esailija

138,174
23
272
326

one question, how can i push var elem. items.push('
' + val + '

Jul 24 '12 at 08:52

@BojanVidanovic can you make a new question with full code? I really need more context for that – Esailija Jul 24 '12 at 08:54

score 0 · Answer 2 · answered Jul 23 '12 at 13:25

0

You must encode your event handler correctly:

onClick="cordova.exec(&quot;ChildBrowserCommand.showWebPage&quot;,&quot;'+vivijesolo+'&quot);"

answered Jul 23 '12 at 13:25

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

I think there is a second problem here. I Dont think that you can create your event this way. Have a look at this question:

Is it possible to append to innerHTML without destroying descendants' event listeners?

simply using innerHTML imho will not set up the event correctly.

edited May 23 '17 at 12:03

Community

1
1

answered Jul 23 '12 at 13:36

Chris

7,675
8
51
101

1

The question you linked is a very different issue. Doing `.innerHTML +=` (The one and only thing I can say that one should **never** do with 110% confidence) always creates completely new elements as it serializes and unserializes from DOM to HTML and HTML to DOM so it cannot retain any context such as event handlers. – Esailija Jul 23 '12 at 13:42

JavaScript function call inside inner.html

3 Answers3