Below is my code trying to add some html to page...
$('#DocUploadDiv').append(
'<div class="uploadClick" style="float:left; margin-right: 10px; margin-bottom: 10px">' +
'<i class="fa fa-times fa-remove"></i>' +
'<i class="fa fa-plus-circle fa-2x" onclick="$("#DocUpload").click()"></i>' +
'<div>'
);
Look at your quotes. You have
`'....onclick="$("#DocUpload").click()"...`
Where does that attribute end? Answer: Here:
`'....onclick="$("#DocUpload").click()"...`
// --------------^
because that's the first "
after the opening "
.
You can fix it in at least two ways: By using a '
and escaping it (since this is all in a string delimited by '
):
`'....onclick="$(\'#DocUpload\').click()"...`
// --------------^^----------^^
or since the text in onxyz
handlers is HTML (although people tend to forget that), you could use the named character entity "
:
`'....onclick="$("#DocUpload").click()"...`
// --------------^^^^^^----------^^^^^^
But better still would be to use modern event handling:
Ditch the onclick
attribute entirely
Add a semantic class to that i
element, such as trigger-upload
Use delegated handling:
$(document).on("click", "#DocUploadDiv .trigger-upload", function() {
$("#DocUpload").click();
});
Even better than that would be to have both elements call the same function, rather than doing a synthetic click:
function handleUpload() {
// Do whatever you're doing in the #DocUpload click handler now
});
$("#DocUpload").click(handleUpload);
$(document).on("click", "#DocUploadDiv .trigger-upload", handleUpload);
Or even:
$(document).on("click", "#DocUploadDiv .trigger-upload, #DocUpload", function() {
// Do whatever you're doing in the #DocUpload click handler now
});