JS issue on IE

Defect : onClick is not working on IE

IE seems like more sensitive to JS and it detects minor typo such as "" which is disregarded on Chrome.

Solution :

1. Replaced the first click target by adding the 'label' tag and made it associated with the actual target field.

For a <label> to work properly, it must include a for attribute, which identifies the <input> to which it is associated. The for attribute's value should match the id (not the name) of the <input> element.


When associating the label with the file field, the field became clickable even without click method on Chrome. I STILL DO NOT KNOW HOW THIS IS WORKING!!!!!!!!! 



<div class="img-wrapper">
<label for="updateImage" id="updateImageLabel">
<img alt="" class="img-circle profile-avatar-img" src="<%= currentUser.getPortraitURL() %>" style="width:6.2em;height:6.2em;cursor: pointer;" />
<img alt="plus icon not found" src="<%=themeDisplay.getPathThemeImages()%>/icons/Icon-add box-blue-round.svg" style="width:1.7em; vertical-align: bottom; margin-left: -1.9em; cursor: pointer;" />
</label>
<input id="updateImage" type="file" name="profilePicture" onChange="readImageURL(this);" style="display:none" />
</div>


2. Added the condition to check the browser type.

if (Liferay.Browser.isIe()) {
$("#updateImageLabel").off("click");
$("#updateImageLabel").click(
function() {
$("#updateImage").click();
}
);
}


3. Who the hell is still using internet explorer? Even MS tells people to stop using it.