Javascript 在文本编辑器中拖放img不会触发鼠标

我正在使用Jquery文本编辑器，在编辑时，我想在编辑器上拖放图像。但问题是，在jqte上放置img后，

mouseenter

事件不会触发

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

$（文档）.ready（函数（）{
$（'.jqte_editor img'）。on（'mouseenter'，function（）{alert（“hello”）；
$（此）。在（”
"); });
});

编辑器主容器

       <div class="jqte_editor" contenteditable="true"><img ></img></div>

---

您的代码是有效的，除了一个问题：您正在将

鼠标指针

处理程序附加到选择器

.jqte\u编辑器img

。您的

jqte_编辑器
div中有一个
img
，但由于它没有
src
（也没有任何CSS指定宽度或高度），因此它是一个0宽0高的图像。因此，
mouseenter
事件无法在该img上触发，因为它没有被渲染

我使用了您的代码，并将事件附加到
.jqte_editor
上，它按预期工作

尽管如此，只要鼠标进入div，即使用户没有拖动任何东西，也会触发此事件。因此，下面的脚本检测
div
的内容何时更改，并且仅在添加图像时才会激发（）：

var contents=$（'.jqte_editor'）.html（）；
$（文档）.ready（函数（）{
$（'.jqte_editor'）。在（“mouseenter”，function（）上{
if（contents！=$（this.html（））{
var to=contents.length；
var diff=$（this.html（）.substr（长度）；
如果（diff.substr（0,4）.toLowerCase（）=”啊，我误解了你！忽略我之前的答案

在
.jqte_editor img
对象上使用
on（）
时，您将
mouseenter
事件附加到
中的所有
元素，并且这些事件在调用
on（）
的确切时间附加到（这称为直接事件处理程序）因此，当您在
为空时调用它时，没有
可将事件附加到

这就是为什么，当您重新打开已包含图像的编辑器时，您的
on（）
语句此时实际上包含要将事件附加到的图像

您需要的是委托事件处理程序。您可以使用以下脚本：

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

$（文档）.ready（函数（）{
$（'.jqte_editor'）。在（'mouseenter'，'img'，function（）上{
警惕（“你好”）；
$（本）。在（“”）之前；
});
});

基本上，您将事件附加到
.jqte_编辑器本身
？该选择器意味着这将成为一个委托事件处理程序。它将在
.jqte_editor
中的任何
上触发，无论该图像是否已存在或将在将来动态添加。
谢谢，这非常好。但我发布的内容已被删除。实际上，当我拖放图像时，它是可见的。但不会启动鼠标。当我存储编辑的文本并在编辑器中重新打开时，它工作正常。所以我的问题是在这种情况下如何绑定鼠标。哈哈…很少有人能回答，其余的人只能在那里投票。我讨厌投票人。。
$(document).ready(function() {
    $('.jqte_editor').on('mouseenter', 'img', function() {
        alert("hello"); 
        $(this).before("<div style='position:absolute'><input type='textbox'></input></div>");
    });
});