動態添加按鈕上點擊不起作用

我在我自己的圖像瀏覽器中建立一個函數，當用戶將光標懸停在某個圖像的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上時，會調用該函數。

如何確保點擊事件中的動態添加滾動按鈕的工作？

該功能可以在DE查看：http://www.imaginedigital.nl/CMS/Editor/ImagePicker.html或http://jsfiddle.net/f239ymos/

任何幫助將高度讚賞。

來源

2014-09-19 Joris416

控制檯中的錯誤消息？也許你想要trashcan.onclick = function（）{deleteImage（'''+ image.id +''''）;};此外，如果圖像是一個'img'標籤，你不能有一個孩子 – mplungjan 2014-09-19 13:19:47

你可以提供一個jsfiddle嗎？ – Alexandros 2014-09-19 13:22:42

圖像以3格顯示：1個容器，一個圖像預覽，它是一個img標籤，另一個div顯示圖像名稱。 de容器是實際創建孩子的div，因此不會導致問題。 – Joris416 2014-09-19 13:22:57

你迫使我在這裏猜測（不提供小提琴），並創建一個我自己的場景，但從我的理解，你想要一個按鈕不出現懸停，當按下刪除圖像，所以在這裏一個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(); 
});

PS至於你的動態增加divs的問題，$(selector1).on('click','selector2', function() {...});處理它，只要selector1沒有動態添加。（selector2會是你想要的功能是對格）

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

然後因爲你傳遞一個對象，你可以改變demo with dynamically added elements（點擊克隆）

來源

2014-09-19 13:37:38 Alexandros

我不認爲他在使用jQuery。 – KoenW 2014-09-19 13:39:46

如果沒有理由，他不能使用它，爲什麼不使用它：P – Alexandros 2014-09-19 13:41:08

我認爲一個鏈接到網站本身會更好。這是因爲圖像選擇器會通過xmlhttprequests從這些圖像所在文件夾中的API加載所有圖像。這通常不會被jsfiddle加載。儘管如此，這裏是：http://jsfiddle.net/f239ymos/ – Joris416 2014-09-19 13:53:23

首先改變

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

至

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

但是，爲什麼不只是隱藏和顯示垃圾桶呢？更清潔

來源

2014-09-19 16:41:54 mplungjan

動態添加按鈕上點擊不起作用

回答

相關問題