如何在javascript中从链接中将事件添加到图像中？

Question

首先，我的html中有一个存在的图像，我在windown.onload中添加了dblclick事件来切换类，它可以正常工作。

//html

<button onclick="insertImageImageFromLink('../pic02.png')" >
 Add New Image
</button>
<div contenteditable="true">
<img src="../pic01.png" />
</div>

//css

button{
    width: 100px;
    height: 50px;
}
img {
border:5px solid white;
}
.ontap-2{border-color:green;}

//javascript

function toggleClass(elem, name) {
    if (elem.className.indexOf(name) < 0) {
        elem.className += ' '+name;
    } else {
        elem.className = elem.className.split(name).join('');
    }
}

function clearSelection() {
    var selection =
        window.getSelection ? window.getSelection() :
        document.getSelection ? document.getSelection() :
        document.selection;

    if (selection && selection.removeAllRanges) {
        // W3C-style
        selection.removeAllRanges();

    } else if (selection && selection.empty) {
        // IE-style
        selection.empty();
    }
}

function setupEventForAnImage(image) {
    image.ondblclick=function(){
    toggleClass(image,'ontap-2');
    clearSelection();
    };
}
function prepareEventHandlers() {      
   var imageArray = document.getElementsByTagName('img');
  for (var i = 0; i < imageArray.length; i++) {
    var image = document.getElementsByTagName('img')[i];
    setupEventForAnImage(image);
    }
}

window.onload = function() {
    // prep anything we need to
    prepareEventHandlers();
};

现在，我需要从一个按钮向可满足的div添加图像。

<button onclick="insertImageImageFromLink('../pic02.png')" >

function insertNodeAtCursor(node) {
    var range, html;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

function insertImageImageFromLink(imageLink){
    var imge = new Image();
    imge.src = imageLink;
    insertNodeAtCursor(imge);
    setupEventForAnImage(image);
}

插入图像在我的浏览器上工作，但是setupEventForAnImage(图像)；不工作之类的代码：http://jsfiddle.net/DSa7a/4/但是函数插入图像只在我的浏览器中工作，而不是在这个链接上工作。

如果从链接中插入事件，如何将事件添加到图像？

请帮帮我！谢谢!

Answer 1

看看这个Fiddle。这件事似乎很顺利。

在原始代码中似乎有一个错误。在insertImageImageFromLink函数中，应该是

setupEventForAnImage(imge);

而不是

setupEventForAnImage(image);