jquery mouseenter is not working on img

1k Views Asked by At

I am trying to drag an image to jquery Text editor (jqte) and then resize it in the editor. As the resizing function works only in firefox. so i think to provide W and H textbox on mouseenter to change the size. but the mouseenter is not working on img element.

     <div class="jqte_editor" contenteditable="true"><pre style="font-family:consolas;">
      <br>
        &nbsp;&nbsp;&nbsp;&nbsp;
         <img style="border-left-width: 1px; border-left-style:   solid; border-left-color: rgb(255, 255, 255); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(255, 255, 255);" src="http://localhost:65380/Articles/ArticleImageStore/cf82c9c8-3ea0-4c7f- 9272-7b2fd48a9eed/79825f3f-965f-4e34-ad45-3fa7430e6837.JPEG" width="64" height="64" id="img6">         
     </pre>
     <p><br></p>
     <pre style="font-family:consolas;">&nbsp;&nbsp;&nbsp;</pre>  <p></p>                         
     </div> 

jquery code snippet

         $('.jqte_editor img').on('mouseenter', function() { 
             alert("hello");
             $(this).before("<div style='position:absolute'><input type='textbox'></input></div>"); 
         });
2

There are 2 best solutions below

9
On

Your code is working here

Either you did not include required jQuery library, this link shows how jQuery works or you did not put the event binding in document.ready.

Adding jQuery

<script src="http://code.jquery.com/jquery-latest.min.js" 
               type="text/javascript"></script>

Binding event in document.ready

$(document).ready(function(){
    $('.jqte_editor img').on('mouseenter', function() { alert("hello"); $(this).before("<div style='position:absolute'><input type='textbox'></input></div>"); });
});
1
On

Your code is working fine : http://jsfiddle.net/ANnH2/

If you didn't wrap the code in .ready function, check that once :

$(document).ready(function(){
    $('.jqte_editor img').on('mouseenter', function() {
        alert("hello");
        $(this).before("<div style='position:absolute'><input type='textbox'></input></div>"); 
    });

});