jQuery的點擊（）圖像

Question

爲什麼我點擊工作

的jQuery：

$(document).ready(function(){ 
    $('#slotclick').click(function(){ 
     $(this).append('<div id=\"alertfade\"><div class=\"alert\">Slotje<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
    }); 

    $('#stickyclick').click(function(){ 
     $(this).append('<div id=\"alertfade\"><div class=\"alert\">Sticky<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
    }); 
}); 

HTML：

<img src="./../../assets/images/icons/slot.png" id="slotclick"> 
<img src="./../../assets/images/icons/sticky.png" id="stickyclick"> 

當點擊，它必須打開一個警告窗口，已用css做到這一點！ 但是，如果我點擊圖像插槽或粘，它不會打開

Answer 1

你不能做$(this).append，因爲圖像標籤不能有任何孩子。

所以無論是在身體追加或使用.after()而不是追加圖像

Answer 2

後，只需插入您不能<div>追加到<img>。如果您想在點擊圖像後添加某些內容，請將圖像包裝在<div>中，然後追加到該圖像上。

Answer 3

這是你所需要的：

HTML：

<div id="slotDiv"> <img src="./../../assets/images/icons/slot.png" id="slotclick"> </div> 
<div id="stickyDiv"> <img src="./../../assets/images/icons/sticky.png" id="stickyclick"> </div> 

的javascript：

$(document).ready(function(){ 
$('#slotclick').click(function(){ 
    $('#slotDiv').append('<div id=\"alertfade\"><div class=\"alert\">Slotje<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
}); 

$('#stickyclick').click(function(){ 
    $('#stickyDiv').append('<div id=\"alertfade\"><div class=\"alert\">Sticky<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
    }); 
}); 

Answer 4

這裏工作演示：

$(document).ready(function(){ 
    $('#slotclick').click(function(){ 
     $(this).after('<div id=\"alertfade\"><div class=\"alert\">Slotje<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
    }); 

    $('#stickyclick').click(function(){ 
     $(this).after('<div id=\"alertfade\"><div class=\"alert\">Sticky<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
    }); 
}); 

Answer 5

你應該試試這個： -

$(document).ready(function(){ 
$('#slotclick').click(function(){ 
      $(this).after('<div id=\"alertfade\"><div class=\"alert\">Slotje<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
}); 

$('#stickyclick').click(function(){ 
      $(this).after('<div id=\"alertfade\"><div class=\"alert\">Sticky<font style=\"float:right;\"><a href=\"#\" onclick=\"window.location.reload()\">X</a></font></div></div>'); 
}); 

}）;

因爲當你編寫append時，html就像，所以你無法看到潛水，否則你的代碼正在工作。