Jquery函数'.on("click")'开始未交

Question

我有一个页面上有2张图片，如果用户点击图片a，函数a开始，如果用户点击图片B，函数B开始。它看起来像这样:

$('#imgA').on("click", function(){
    $('.challenge').hide('slow');
    alert('a');
});
$('#imgB').on("click", function(){
    $('.challenge').hide('slow');
    alert('b');
});

HTML

<div class='challenge' id='4'> 
    <img class='inline' id='imgA'> 
    <img class='inline' id='imgB'> 
</div>

我测试了这段代码几次，大多数时候它工作正常，但有时我点击#imgA，首先得到警报('a')，然后我得到警报('b')(或其他方式)。在我的程序中，这是一个严重的错误。

有人知道我做错了什么吗?

Answer 1

首先将方法one改为on。根据你的代码，你首先必须关闭你的标签，并在你想要点击的每个图像中添加事件:

HTML:

<div id="challenge">
    <div class='challenge' id='4'>
        <img style="cursor:pointer" id='a2' src='http://bit.ly/1B8xvUr' height='100px' width='200px'/>
        <img style="cursor:pointer" id='b4' src='http://bit.ly/1B8xvUr' height='100px' width='200px'/>
    </div>
</div>

JQUERY

$('#a2').on("click", function () {
    alert('a');
    $(".challenge").hide('slow');
});
$('#b4').on("click", function () {
    alert('b');
    $(".challenge").hide('slow');
});

还可以在每个图像中添加style="cursor:pointer"，以查看指针是否可点击。

看这里:

https://fiddle.jshell.net/q9oa978j/3/