How to add event to an image when insert it from link in javascript? -
first, have image exist in html, add dblclick event toggle class in windown.onload , work ok.
//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'); (var = 0; < imagearray.length; i++) { var image = document.getelementsbytagname('img')[i]; setupeventforanimage(image); } } window.onload = function() { // prep need prepareeventhandlers(); };
now, need add image contenteditable div button
<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); }
insert image work on browser, setupeventforanimage(image); not work thing code : http://jsfiddle.net/dsa7a/4/ function insert image work in browser, not work on link.
how add event image if insert link?
please help! thanks!
check fiddle. event seems working fine.
there seems typo in original code. in insertimageimagefromlink
function, should
setupeventforanimage(imge);
instead of
setupeventforanimage(image);
Comments
Post a Comment