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

这是一个简单的修复，只需在你的选择器中添加一个hashtag，因为它是一个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点击处理程序没有触发？

2 个答案: