Question

如果您编辑此元素添加行并单击第一行它可以工作，但如果您单击第二行或第三行它会出错。我使用的是代码。

JS：

$('.layer-text').append("<p class='textbox' contenteditable='true'>Click me</p>")

$("body").on('click', '.layer-text', function(e){

        if(!$(e.target).is('.textbox')) {

            $(".textbox").removeClass("active");
            alert("!textbox");

        }
});

$('.layer-text').on('click', '.textbox', function() {
        $(this).addClass("active");
        alert("is textbox");
});

HTML：

<div class='layer-text'></div>

CSS：

body, .layer-text {width: 300px; height: 400px; background: #f0f0f0;}
.textbox.active {background: red;}

谢谢你的帮助。 Kasta

Answer 1

那是因为您正在测试e.target，而事件的目标不是p.textbox，而是div已插入if (!$(e.target).closest(".textbox").length) { // It's not a .textbox, and not *in* a .textbox });通过浏览器。

您可以使用closest：

div.layer-text

Here's a live copy您的原始代码，here's a live copy，其中包含上述更改。

请注意，我假设textbox永远不会将置于一个带有closest类的元素中，因为.layer-text赢得了＆＃t停止查看div if (!$(e.target).closest(".textbox, .layer-text").hasClass("textbox")) { // It's in a .layer-text, but not in a .textbox within a .layer-text });。如果你需要那么精确，你可以改用它：

{{1}}

在contenteditable模式下编辑的元素，点击上添加的行在第二行上不起作用

1 个答案: