Question

我在自己的图片浏览器中构建一个功能，当用户将光标悬停在某个图像的div上时创建并显示一个删除按钮，当用户将鼠标悬停在某个图像上时隐藏按钮div。

这是代码：

     function displayImages() {
        //run through array of images
        for (a = 0; a < images.length; a++) {

var container = document.createElement('div');
                container.id = 'container'+images[a];
                container.style.width = 120;
                container.style.backgroundColor = '#e9e9e9';
                container.style.height = 140;
                container.style.margin = 5;
                container.style.display = 'inline-block';
                container.style.float = 'left';
                var imageID = images[a];
                container.onmouseover = function() {imageRollover(this)};
                container.onmouseout = function() {imageMouseOut(this)};
    }       
   }


function imageRollover(image) {
        var trashcan = document.createElement('BUTTON');
        trashcan.id = 'trash'+image.id;
        trashcan.className = 'deleteButton';
        trashcan.onclick = function() {deleteImage(image.id);};
        document.getElementById(image.id).appendChild(trashcan);
    }



function imageMouseOut(image) {
    document.getElementById(image.id).removeChild(document.getElementById('trash'+image.id));
        }

function deleteImage(image) {
        alert(image);
    }

我的问题是，当我点击trashcan时，它不会调用任何内容。我已经尝试正常添加onlick事件： trashcan.onclick = deleteImage(image.id); 但是，出于某种原因，当我将鼠标悬停在container上时调用该函数。

如何确保动态添加的翻转按钮的点击事件有效？

可以在http://www.imaginedigital.nl/CMS/Editor/ImagePicker.html或http://jsfiddle.net/f239ymos/

上查看该功能

任何帮助都将受到高度赞赏。

Answer 1

你强迫我在这里猜测（不给小提琴），并创建一个我自己的场景，但从我的理解，你想要一个按钮出现没有悬停，当按下删除图像所以这里它的一个working fiddle

悬停功能

$((document.body).on('mouseenter', '.test', function(){
    console.log('here');
    $(this).children('.test .x_butt').show();
});
$(document.body).on('mouseleave', '.test', function(){
    $('.test .x_butt').hide();
});

删除功能

$(document.body).on('click', '.x_butt', function(){
    $(this).parent().remove();
});

P.S。对于动态添加的div问题，$(selector1).on('click','selector2', function() {...});处理它，只要selector1未动态添加即可。（selector2将是您希望函数处于的div）demo with dynamically added elements（单击克隆）

Answer 2

首先改变

window.onload = loadImages();至window.onload = loadImages;

然后，因为您传递了一个对象，您可以更改

function imageMouseOut(image) {
    document.getElementById(image.id).removeChild(document.getElementById('trash'+image.id));
}

到

function imageMouseOut(image) {
    image.removeChild(image.childNodes[0]);
}

然而，为什么不隐藏并展示垃圾桶呢？更清洁

单击动态添加按钮不起作用

2 个答案: