динамически добавленная кнопка при нажатии не работает

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

П.С. Что касается вашей динамически добавленной проблемы с divs, то она обрабатывает $(selector1).on('click','selector2', function() {...});, пока selector1 не добавляется динамически. (selector2 бы быть ДИВ вы хотите, чтобы функция быть) 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]); 
} 

Однако почему бы не просто спрятать и показать корзину? Значительно более чистый