點擊圖片，一個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(); 
}); 

未經測試，但我認爲這將有助於你肯定問候.... :)