Question

当我将鼠标悬停在通过按钮功能添加的表格行上时，如何更改列中的图像？

以下是我当前的代码，当我将鼠标悬停在该行上时无效。

这是我在表格中添加一行的功能

function addrow()
        {
            var table=document.getElementById("tablelist");
            var row=table.insertRow(-1);
            var cells = new Array();
            for(var i = 0; i < 6;i++)
            {
                cells[i]=row.insertCell(i);
                cells[i].innerHTML="New";
            }
            cells[6]=row.insertCell(6);
            cells[6].innerHTML='<img src="images/pencil-black.png"></img><img src="images/lock-black.png"></img><img src="images/bin-black.png"></img>';
        }

jquery的：

$(document).ready(function(){
$(".userbox td").hover(function() {
var $img = $(this).find("img");
$img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
}, function() {
    var $img = $(this).find("img");
    $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
});  
});

Answer 1

当document.ready正在运行时，addrow()函数添加的元素尚未存在于DOM中。

使用jQuery on：

$(".userbox").on({
    mouseenter: function()  {
         var $img = $(this).find("img");
         $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
    },
    mouseleave: function() {
        var $img = $(this).find("img");
        $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
    }
}, 'td');

或者，您可以在创建元素时绑定事件：

var tdOnMouseOver = function()
    {
    var $img = $(this).find("img");
    $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
    }

var tdOnMouseOut = function()
    {
    var $img = $(this).find("img");
    $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
    }

function addrow()
    {
    var table=document.getElementById("tablelist");
    var row=table.insertRow(-1);
    var cells = new Array();

    for(var i = 0; i < 6;i++)
        {
        cells[i]=row.insertCell(i);
        cells[i].innerHTML="New";
        cells[i].onmouseover = tdOnMouseOver;
        cells[i].onmouseout = tdOnMouseOut;
        }

     cells[6]=row.insertCell(6);
     cells[6].innerHTML='<img src="images/pencil-black.png"></img><img src="images/lock-black.png"></img><img src="images/bin-black.png"></img>';
    }

UPDATE（因为您使用的是jQuery 1.6）：

使用jQuery live：

$(".userbox td").live({
    mouseenter: function()  {
         var $img = $(this).find("img");
         $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
    },
    mouseleave: function() {
        var $img = $(this).find("img");
        $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
    }
});

Answer 2

使用$（'＃tablelist'）。on（'mouseover mouseout'，'img'，function（e）{}）

Answer 3

您需要将delegated events用于动态添加元素的事件：

$(document).ready(function(){
    $(".userbox").on({
        mouseenter: function() {
            var $img = $(this).find("img");
            $img.attr("src", $img.attr("src").replace('-black.png', '-white.png'));
        }, 
        mouseleave: function() {
            var $img = $(this).find("img");
            $img.attr("src", $img.attr("src").replace('-white.png', '-black.png'));
        }, 'td');
    });
});

当我将鼠标悬停在通过按钮功能添加的表格行上时，如何更改列中的图像？

3 个答案: