0

我正在使用 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>
4

2 回答 2

0

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

我使用了您的代码并将事件附加到.jqte_editor，它按预期工作。看看这个小提琴，看看它的工作原理。

虽然，只要鼠标进入 div，即使用户没有拖动任何东西，这个事件也会触发。因此，以下脚本会检测内容何时div更改，并且仅在添加图像时触发（此处为演示）：

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>");
            }
        }
    });
});
于 2013-07-11T17:40:33.167 回答
0

啊，我误会你了！忽略我之前的回答。

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

这就是为什么当您重新打开已经有图像的编辑器时，您的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()然后，您在?中看到第二个参数。该选择器意味着它成为委托的事件处理程序。它将在任何 inside 上触发<img>，.jqte_editor无论该图像已经存在还是将来会动态添加。

于 2013-07-11T18:25:46.330 回答