为什么我的 jQuery 点击处理程序没有触发？

Question

我的 Sharepoint 2010 Web 部件项目的 *WebPartUserControl.ascx 文件中有这个 HTML：

<html>
  <h1>Pre- and Post Travel Form Help</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>

...还有这个 jQuery:

<script type="text/javascript">
    $('imgPostTravel').click(function () {
        alert('you clicked the post Travel image');
        this.addClass('hide');
    });
</script>

相关的 CSS 是：

.hide {
  visibility: hidden;
  display: none;
}

但是，当我单击 'imgPostTravel' 时，没有任何反应 - 不仅图像没有消失，我也没有看到警报。

作为完整性检查（我可能会失败），我在 jsfiddle here 和 中尝试了类似的代码 点击处理程序没有触发- 我所做的事情一定有根本上的愚蠢之处，但我看不到...

Answer 1

这是一个简单的修复，只需将标签添加到您的选择器，因为它是一个 ID：

$('#imgPostTravel').click(function () {

Answer 2

像这样更改您的代码

<script type="text/javascript">
        $(function () {
            $('#imgPostTravel').click(function () {
                alert('you clicked the post Travel image');
                this.addClass('hide');
            });
        });
</script>

为什么我的 jQuery 点击处理程序没有触发？

Why is my jQuery click handler not firing?

html

css

jquery

sharepoint-2010