2

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

以下是我当前的代码，当我将鼠标悬停在该行上时它不起作用。

这是我在表格中添加一行的函数

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'));
});  
});
4

3 回答 3

2

当您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>';
    }

更新（因为您使用的是 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'));
    }
});
于 2013-06-27T08:21:12.737 回答
0

您需要对动态添加的元素上的事件使用委托事件：

$(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');
    });
});
于 2013-06-27T08:15:49.087 回答
0

使用 $('#tablelist').on('mouseover mouseout','img',function(e){})

于 2013-06-27T08:14:06.090 回答