点击图片，一个div里面有两个新的可点击图片

Question

我有一个形象（问号图片）替换它，像这样

HTML

​​

我想这个疑问句标记图像将被替换当我点击它时，通过两个新的可点击的图像（一个勾号和一个十字）。我正在使用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(); 
}); 

未经测试，但我认为这将有助于你肯定问候.... :)