Question

我有一段jQuery代码;

    $('#elements').on('click', '.items', function () {
    var content, id, tag;

    tag = this.tagName;
    id = $('#' + this.id);
    content = id.html();
    switch (tag.substr(0, 1)) {
        case "P":
            id.html("<textarea id='" + this.id + "In' class='" + tag + "In' type='text'>" + content + "</textarea>");
            break;
        case "H":
            id.html("<input id='" + this.id + "In' class='" + tag + "In' value='" + content + "' >");
            break;
    }
});

这样做的目的是当我点击一个段落标签时，它会在段落标签内添加一个文本区域（里面的内容可以编辑）。当我点击标题标签时，它会创建一个“输入”标签，其中包含用于编辑的内容。

不幸的是，当我在段落上单击两次时，它会添加一个文本区域，其中包含内容，但在第二次单击时，它会在其中添加另一个文本区域，现在textarea的“内容”为： <textarea id="2In" class="PIn" type="text">Paragraph one.，每次点击都会添加：<textarea id="2In" class="PIn" type="text">

我理解这种情况正在发生，因为它应该给出代码，但我想停止该特定ID（this.id）上的click事件，但是将click事件保持在其他元素上，并使用类'.items'。< / p>

**另外：** 我确定通过在旧版本中创建可编辑标签来解决这个问题是不好的做法，所以如果有人有更好的方法，请务必告诉我。

非常感谢，麦克

Answer 1

我可能会通过向选择器添加:not(.clicked)并在添加input时添加该类来解决此问题。 E.g：

$('#elements').on('click', '.items:not(.clicked)', function () {
    $(this).addClass("clicked");
    // ...your current handling...
});

但是可以通过检查字段的存在来解决问题，只要您添加的input或textarea是该段落中唯一的一个：

$('#elements').on('click', '.items', function () {
    if (!$(this).find("input, textarea")[0]) {
        // ...your current handling...
    }
});

或者实际上jQuery扩展了CSS以提供:has并允许:not拥有更复杂的内容，所以理论上这可行：

$('#elements').on('click', '.items:not(:has(input)):not(:has(textarea))', function () {
    // ...your current handling...
});

......但那个选择器有点笨拙......

Answer 2

如何使用.one？

通过使用一个，click事件只能触发一次。 Here's an example

$('#elements > *').one('click', function () {
    var content, id, tag;

    tag = this.tagName;
    id = $('#' + this.id);
    content = id.html();
    switch (tag.substr(0, 1)) {
        case "P":
            id.html("<textarea id='" + this.id + "In' class='" + tag + "In' type='text'>" + content + "</textarea>");
            break;
        case "H":
            id.html("<input id='" + this.id + "In' class='" + tag + "In' value='" + content + "' >");
            break;
    }
});

但似乎您正在尝试执行诸如允许用户编辑文本和保存新输入之类的操作。我建议使用contenteditable和localStorage的组合。

停止针对特定元素ID的其他单击事件 - JQuery

2 个答案: