Question

我在div里面有一个图像（问号图像）

HTML

<div id="other">
    <img id="clickQues" class="quesMark" src="ques" />
</div>

当我点击它时，我希望这个问号图像被两个新的可点击图像（刻度线和十字形）替换。我正在使用jQuery来实现这一目标。我能够成功替换图像。但是，我无法点击新的勾选，交叉图标。

我的jQuery

$('#clickQues').click(function(){
    $('.quesMark').hide();      
    $('#other').append("<img src='tick.png' id='tickIcon'>");
    $('#other').append("<img src='cross.png' id='crossIcon'>");
});

$('#tickIcon').click(function(){
    //hide the other cross icon
    //do something
});

$('#crossIcon').click(function(){
    //hide the other tick icon
    //do something
});

Heres the fiddle

我做错了什么？

Answer 1

由于元素是动态添加的，因此您需要使用事件委派

$('#other').on('click', '#tickIcon', function(){
    //hide the other cross icon
    //do something
});

$('#other').on('click', '#crossIcon', function(){
    //hide the other tick icon
    //do something
});

演示：Fiddle

Answer 2

试试这个：Event Delegation

$('body').on('click','#tickIcon',function(){
    //hide the other cross icon
    //do something
});

$('body').on('click','#crossIcon',function(){
    //hide the other tick icon
    //do something
});

Answer 3

$('#clickQues').click(function () {
    $('.quesMark').hide();
    $('#other').append("<img id='tickIcon' src='http://www.pcdr.gr/moodle/theme/themza_moo_05/pix/i/tick_green_big.gif'>");
    $('#other').append("<img id='crossIcon' src='http://www.iconshock.com/img_jpg/VECTORNIGHT/general/jpg/16/cross_icon.jpg'>");
});

$('#other').on("click",'#tickIcon',function () {
    $('#crossIcon').hide();
});

$('#other').on("click",'#crossIcon',function () {
    //hide the other tick icon
    //do something
    $('#tickIcon').hide();
});

参见 demo

Answer 4

$('#clickQues').click(function(){
    $('.quesMark').hide();      
    $('#other').append("<img class='right' src='tick.png' id='tickIcon'>");
    $('#other').append("<img class='close' src='cross.png' id='crossIcon'>");
});


$('.right').click(function () {
    $('.close').hide();
});

$('.close').click(function () {
    $('.right').hide();
});

未经测试，但我认为这有助于您肯定会问......：）

单击图像，将其替换为两个新的可单击图像

4 个答案: