Question

我正在使用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>"); });
           });

编辑主容器

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

Answer 1

您的代码有效，但有一个问题：您将mouseenter处理程序附加到选择器.jqte_editor img。您的img div中有jqte_editor，但由于它没有src（也没有任何CSS给它宽度或高度），因此它是0宽0高的图像。因此，mouseenter事件无法触发该img，因为它未被渲染。

我使用了您的代码并将事件附加到.jqte_editor，而且它按预期工作。 Look at this fiddle to see it working.

虽然，只要用户没有拖动任何内容，只要鼠标进入div就会触发此事件。因此，以下脚本会检测div的内容何时更改，仅在添加了图像时触发（demo here）：

var contents = $('.jqte_editor').html();
$(document).ready(function() {
    $('.jqte_editor').on("mouseenter", function() {
        if (contents != $(this).html()) {
            var to = contents.length;
            var diff = $(this).html().substr(length);
            if (diff.substr(0,4).toLowerCase() == "<img") {
                alert("Image added.");
                $(this).before("<div style='position:absolute'><input type='textbox'></input></div>");
            }
        }
    });
});

Answer 2

啊，我误解了你！无视我之前的回答。

当您在on()对象上使用.jqte_editor img时，您将mouseenter事件附加到<img>中的所有<div>元素，并且这些事件在on()被调用的确切时间附加。（这称为直接事件处理程序。）因此，当您在{{1}时调用它时空白，没有<div>来将事件附加到。

这就是为什么当你重新打开已包含图像的编辑器时，你的<img>语句实际上有图像将事件附加到此时。

您需要的是委派的事件处理程序。你会使用这个脚本：

on()

基本上，您将事件附加到$(document).ready(function() { $('.jqte_editor').on('mouseenter', 'img', function() { alert("hello"); $(this).before("<div style='position:absolute'><input type='textbox'></input></div>"); }); });本身。然后，你看到.jqte_editor中的第二个参数？该选择器意味着它成为委派的事件处理程序。它会触发on()内的任何<img>，无论该图片是否已存在，还是将来会动态添加。

在文本编辑器中拖放img不会触发mouseenter

2 个答案: