Question

#header{  
    height: 80px;
    padding-left: 208px;
    background-image: url("Trans.png"); 
    background-repeat: no-repeat;
} 
<div id="header">
<!--display something float to the right-->
</div>

如何绑定背景图像onclick事件？

$("#header").delegate(":image", "click", function() {
//this does not work
});

这两项都不起作用：（

$("#header:image").click(function() {}

TIA

Answer 1

由于图像显示为div的背景，因此在div上绑定事件：

$(document).delegate("#header", "click", function() {....});

另请注意，delegate已被on()处理程序取代。

$(document).on("click", "#header", function() {....});

Answer 2

背景图像不是DOM中的元素 - 您无法将事件绑定到它。你为什么要这样做？

如果您只想跟踪非重复背景上的点击次数 - 将您的事件绑定到标题，然后获取点击的x-y坐标进行数学运算。

或者 - 在内部添加另一个div，其背景的确切尺寸和位置，将事件（甚至图像）添加到该div。

Answer 3

<div id="header" onclick="function()"></div>

Answer 4

$("#header").click(function(){
        $('#header').css("background",":url('diff.jpg')");
});

应该有用。

Answer 5

$("#header").click(function(){
    $(this).css("background-image","<url>");
});

Answer 6

$('img').click (function(event){
var image_link = $(this).data('img');
$("body").css("background-image","url('"+image_link+"')");});

很好

<img data-img="1.png" background-image:url("1.png")>

CSS背景图片onclick

6 个答案: