图像的Onclick (在元素<a>中使用)在jquery中不起作用

Question

我在Div中有一个固定导航栏的页脚。

<div id="footer">
    <div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
        <div class="row" id="bottomNav">
            <div class="col-xs-4 text-center">
                <a id="id1" href="#">
                    <img id="image1" src='img/feature1.png' alt='missing'>
                    <div class="caption">Act-1</div>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a id="id2" href="#">
                    <img id="image2" src='img/feature2.png' alt='missing'>
                    <div class="caption">Act-2</div>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a id="id3" href="#">
                    <img id="image3" src='img/feature3.png' alt='missing'>
                    <div class="caption">Act-3</div>
                </a>
            </div>
        </div>
    </div>
</div>

在点击image1时，我想做一些事情。我正在使用alert来测试它。jquery函数位于单独的js文件中，该文件被添加到html中。这是js文件中唯一的函数。我试图在ebelow函数中使用#id1和#image1，但它就是不被调用。

$("#image1").click(function() {
    alert("you are in Act-1 window");
});

这么简单的代码出了什么问题，我就是搞不懂。

Answer 1

您的代码运行良好。它似乎对我很有效。如果这正是您要查找的内容，则会调用该警报

$("#image1").click(function() {
    alert("you are in Act-1 window");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer">
    <div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
        <div class="row" id="bottomNav">
            <div class="col-xs-4 text-center">
                <a id="id1" href="#">
                    <img id="image1" src='img/feature1.png' alt='missing'>
                    <div class="caption">Act-1</div>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a id="id2" href="#">
                    <img id="image2" src='img/feature2.png' alt='missing'>
                    <div class="caption">Act-2</div>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a id="id3" href="#">
                    <img id="image3" src='img/feature3.png' alt='missing'>
                    <div class="caption">Act-3</div>
                </a>
            </div>
        </div>
    </div>
</div>

​

Answer 2

如果你不打算使用它，为什么要把图片放在href="#“里面呢？在这里你有一个错误

Answer 3

你也可以避免vanila js写的jQuery。

var img = document.querySelector('#YourID');
img.addEventListener('click', handler function);

最好使用分离函数进行处理(在这种情况下，您可以删除处理程序)。