点击时动态添加的按钮不起作用

Question

I'm building a function in my own image browser that creates and displays a delete button when the user hovers the cursor over a certain image's div and hides the button when the user hover the mouse out of the div.

this is the code:

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

My problem is, that when I click trashcan , it calls nothing. I already tried to add the onlick event normally: trashcan.onclick = deleteImage(image.id); But then, for some reason, is calls the function when I hover my mouse over the container .

How do I make sure that on click events for dynamically added rollover buttons work?

The function can de viewed on: http://www.imaginedigital.nl/CMS/Editor/ImagePicker.html or http://jsfiddle.net/f239ymos/

Any help would be highly appreciated.

Answer 1

You are forcing me to guess here(not giving a fiddle), and create a scenario of my own but from what I understand, you want a button to appear no hover, and when pressed to delete the image so here its a working fiddle

hover functionality

$((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();
});

remove functionality

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

PS as for your dynamically added divs issue, the $(selector1).on('click','selector2', function() {...}); deals with it, as long as selector1 is not added dynamically. ( selector2 would be the div you want the function to be on) demo with dynamically added elements ( click clone )

Answer 2

First change

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

Then since you pass an object you can change

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

to

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

However why not just hide and show the trashcan? Much cleaner