In this text
<div class="foo" <!-- onclick="bar();" --> /></div>
the /> is being shown within the browser (Chrome) and on iOS devices. My first guess was to delete the / from the <div> but then the > was still being shown within the browser, woe is me!
Solutions?
EDIT:
After discussing with the OP, it was found that the onclick method was still needed, so the solution was to use <div class="foo" onclick="bar();"> </div> without the 'commented code' in it.
Original answer:
Try - <div class="foo" <?php /* onclick="bar();" */ ?> > </div> which will result in <div class="foo"> </div>. Notice that the entire thing is filtered by your PHP.
For JSP/ASP, use <%-- --%> style comments. <div class="foo" <%-- onclick="bar();" --%> > </div>
Remove the comment. My guess is that the browser is interpreting the comment close as the end tag. Just put the entire div in a comment, with a different version below.
Comments are forbidden inside tags, so your HTML is wrong.
If you want a comment, put it after the end of the tag:
<div class="foo"> <!-- onclick="bar();" --> </div>
Additionally, you should not have a / character at the end of the start tag for a div.
In HTML (before 5) it closes the start tag, so you add a > character to the data. Most browsers do not respect this (your problem is due to the comment though).
In HTML Compatible XHTML it is forbidden.
In XHTML it makes the div a self-closing tag, so the end tag has no matching start tag.
In HTML 5 it is, IIRC, forbidden.
The comment (<!-- -->) is markup that the browser is supposed to ignore.
In this case, your markup is invalid because you are nesting a markup within markup in an invalid way. You will need to delete the "onclick="bar();" or move the entire comment out of the opening div tag.