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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -