0

画像を jquery テキスト エディター (jqte) にドラッグしてから、エディターでサイズを変更しようとしています。サイズ変更機能はfirefoxでのみ機能するため。サイズを変更するには、mouseenterにWとHのテキストボックスを提供すると思います。しかし、mouseenterはimg要素では機能していません。

     <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 コード スニペット

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

2 に答える 2

0

あなたのコードは正常に動作しています: http://jsfiddle.net/ANnH2/

コードを .ready 関数でラップしていない場合は、一度確認してください。

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

});
于 2013-07-11T16:39:27.187 に答える
0

あなたのコードはここで働いています

required を含めていないかjQuery library、このリンクが jQuery の仕組みを示しているか、イベント バインディングをdocument.readyに入れていません。

jQuery の追加

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

document.ready のバインド イベント

$(document).ready(function(){
    $('.jqte_editor img').on('mouseenter', function() { alert("hello"); $(this).before("<div style='position:absolute'><input type='textbox'></input></div>"); });
});
于 2013-07-11T16:36:44.800 に答える