Here is the HTML content within my Sharepoint 2010 Web Part project:
<html>
<h1>Travel Form Assistance</h1>
<div id="preTravel" name="preTravel">
<h2>Pre Travel</h2>
<img id="imgPreTravel" name="imgPreTravel" src="/_layouts/images/TravelFormHelp/posttravelpdf.png" alt="pre Travel image" height="275" width="350">
</div>
<div id="postTravel" name="postTravel">
<h2>Post Travel</h2>
<img id="imgPostTravel" name="imgPostTravel" src="/_layouts/images/TravelFormHelp/posttravelpdf.png" alt="post Travel image" height="275" width="350">
</div>
</html>
...along with this jQuery script:
<script type="text/javascript">
$('imgPostTravel').click(function () {
alert('you clicked the post Travel image');
this.addClass('hide');
});
</script>
The relevant CSS code is as follows:
.hide {
visibility: hidden;
display: none;
}
Despite implementing the onclick event for 'imgPostTravel', nothing seems to happen upon clicking - the image remains visible and the alert does not pop up.
To double-check my logic, I ran a test on jsfiddle here, only to encounter the same issue where the click handler fails to execute. There appears to be an underlying mistake in my approach, but pinpointing it has proven challenging...