Javascript jQuery类事件处理程序-如何禁用类中的一个元素

我有一个附加到类的事件处理程序，如下所示：

$('#container').on('click', '.myClass', function (e) {...

在这个处理程序中，我想将另一个单击处理程序附加到已单击的元素。单击临时处理程序后，我希望重新启用原始处理程序

我试图做的（如图所示）是允许单击一段文本，将其更改为输入文本框，然后提交更改以重新创建文本

我尝试了以下方法，但没有成功，如在：

$（“#容器”）。在（'click'，'.submit'，函数（e）上{
变量$this=$（this），
new_text=$this.prev（）.val（）；
e、 停止传播（）；
$this.parent（）.off（'click.temp'）.html（新文本）；
});
$（“#容器”）。在（'click'，'test'，函数（e）上{
var$this=$（this）；
$this.html（“”）；
$this.on（'click.temp'，函数（e）{
e、 停止传播（）；
});
});

使用

.off（）

似乎不会取消类上的原始处理程序，因为它附加到类而不是元素

我想我已经用

e.stopPropagation（）

部分地回答了我的问题，但它仍然不太有效，我不相信我会用最好的方法来解决这个问题：）

---

注意：与想法相关，但不使用此

我基本上重新构造了代码，以便以相同的方式打开和关闭事件

更新的演示：

更新代码

onClickReadMode

-是在读取模式下单击div时的事件处理程序

onClickEditMode

-是在编辑模式下单击div时的事件处理程序

function onClickReadMode(_elem) {
    console.log('onClickReadMode');
    var $this = _elem, text = $this.text();
    $this.html("<input class='text' type='text' value='" + text + "'/><input class='.submit' value='Submit' type='submit'>");
    _elem.off('click.before');
    _elem.on('click.after', function() {
        onClickEditMode($(this));
    });
    _elem.find('.text').on('click.stopevent', function(e) {
        e.stopPropagation();
        return false;
    });
}

function onClickEditMode(_elem) {
    console.log('onClickEditMode');
    var $this = _elem;
    var new_text = $this.find('input').val();
    $this.html(new_text);
    _elem.off('click.after');
    _elem.on('click.before', function() {
        onClickReadMode($(this));
    });
}

$('.test').on('click.before', function (e) {
    onClickReadMode($(this));
});

函数onClickReadMode（\u elem）{
log（'onClickReadMode'）；
var$this=_elem，text=$this.text（）；
$this.html（“”）；
_元素关闭（'click.before'）；
_元素on（'click.after'，函数（）{
onClickEditMode（$（this））；
});
_元素查找（'.text'）。打开（'click.stopevent'，函数（e）{
e、 停止传播（）；
返回false；
});
}
函数onClickEditMode（_elem）{
log（'onClickEditMode'）；
var$this=\u elem；
var new_text=$this.find（'input'）.val（）；
$this.html（新文本）；
_元素关闭（'click.after'）；
_元素on（'click.before'，函数（）{
onClickReadMode（$（this））；
});
}
$（'.test'）。on（'click.before'，函数（e）{
onClickReadMode（$（this））；
});

我基本上重新构造了代码，以便以相同的方式打开和关闭事件

更新的演示：

更新代码

onClickReadMode

-是在读取模式下单击div时的事件处理程序

onClickEditMode

-是在编辑模式下单击div时的事件处理程序

function onClickReadMode(_elem) {
    console.log('onClickReadMode');
    var $this = _elem, text = $this.text();
    $this.html("<input class='text' type='text' value='" + text + "'/><input class='.submit' value='Submit' type='submit'>");
    _elem.off('click.before');
    _elem.on('click.after', function() {
        onClickEditMode($(this));
    });
    _elem.find('.text').on('click.stopevent', function(e) {
        e.stopPropagation();
        return false;
    });
}

function onClickEditMode(_elem) {
    console.log('onClickEditMode');
    var $this = _elem;
    var new_text = $this.find('input').val();
    $this.html(new_text);
    _elem.off('click.after');
    _elem.on('click.before', function() {
        onClickReadMode($(this));
    });
}

$('.test').on('click.before', function (e) {
    onClickReadMode($(this));
});

函数onClickReadMode（\u elem）{
log（'onClickReadMode'）；
var$this=_elem，text=$this.text（）；
$this.html（“”）；
_元素关闭（'click.before'）；
_元素on（'click.after'，函数（）{
onClickEditMode（$（this））；
});
_元素查找（'.text'）。打开（'click.stopevent'，函数（e）{
e、 停止传播（）；
返回false；
});
}
函数onClickEditMode（_elem）{
log（'onClickEditMode'）；
var$this=\u elem；
var new_text=$this.find（'input'）.val（）；
$this.html（新文本）；
_元素关闭（'click.after'）；
_元素on（'click.before'，函数（）{
onClickReadMode（$（this））；
});
}
$（'.test'）。on（'click.before'，函数（e）{
onClickReadMode（$（this））；
});

您只需按以下方式操作即可：

function testClick() {

    var $this = $(this),
        text = $this.text();

    // you have to off the click like this
    $('#container').off('click', '.test');
    
    $this.html(
        "<input class='text' type='text' value='" + text + "'/><input class='submit' value='Submit' type='submit'>"
    );

    $this.find('.submit').on('click', function(e) {
        e.stopPropagation();
        var new_text = $this.find('input.text').val();
        $this.html(new_text);
        $('#container').on('click', '.test', testClick); // again on click
    });
}

$('#container').on('click', '.test', testClick);

函数testClick（）{
变量$this=$（this），
text=$this.text（）；
//你必须像这样停止点击
$（“#容器”）.off（'click'，'test'）；
$this.html(
""
);
$this.find（'.submit'）。on（'click'，函数（e）{
e、 停止传播（）；
var new_text=$this.find（'input.text'）.val（）；
$this.html（新文本）；
$（“#容器”）。on（'click'，'.test'，testClick）；//再次单击
});
}
$（'#container'）。on（'click'，'test'，testClick）；

您可以按如下方式分隔提交事件：

函数testClick（）{
变量$this=$（this），
text=$this.text（）；
//你必须像这样停止点击
$（“#容器”）.off（'click'，'test'）；
$this.html（“”）；
}
$（“#容器”）。在（'click'，'.submit'，函数（e）上{
e、 停止传播（）；
var new_text=$（this.prev（'input.text'）.val（）；
$（this.parent（）.html（新文本）；
$（“#容器”）。on（'click'，'.test'，testClick）；//再次单击
});
$（'#container'）。on（'click'，'test'，testClick）；

---

您只需按以下方式操作即可：

function testClick() {

    var $this = $(this),
        text = $this.text();

    // you have to off the click like this
    $('#container').off('click', '.test');
    
    $this.html(
        "<input class='text' type='text' value='" + text + "'/><input class='submit' value='Submit' type='submit'>"
    );

    $this.find('.submit').on('click', function(e) {
        e.stopPropagation();
        var new_text = $this.find('input.text').val();
        $this.html(new_text);
        $('#container').on('click', '.test', testClick); // again on click
    });
}

$('#container').on('click', '.test', testClick);

函数testClick（）{
变量$this=$（this），
text=$this.text（）；
//你必须像这样停止点击
$（“#容器”）.off（'click'，'test'）；
$this.html(
""
);
$this.find（'.submit'）。on（'click'，函数（e）{
e、 停止传播（）；
var new_text=$this.find（'input.text'）.val（）；
$this.html（新文本）；
$（“#容器”）。on（'click'，'.test'，testClick）；//再次单击
});
}
$（'#container'）。on（'click'，'test'，testClick）；

您可以按如下方式分隔提交事件：

函数testClick（）{
变量$this=$（this），
text=$this.text（）；
//你必须像这样停止点击
$（“#容器”）.off（'click'，'test'）；
$this.html（“”）；
}
$（“#容器”）。在（'click'，'.submit'，函数（e）上{
e、 停止传播（）；
var new_text=$（this.prev（'input.text'）.val（）；
$（this.parent（）.html（新文本）；
$（“#容器”）。on（'click'，'.test'，testClick）；//再次单击
});
$（'#container'）。on（'click'，'test'，testClick）；

---

与其动态地添加和删除输入的处理程序，不如使用委托事件处理程序，如

$('#container').on('click', '.test', function (e) {
    var $this = $(this);
    $this.removeClass("test")
         .html("<input type='text' value='" + $this.text() + "'/><input id='me' value='Submit' type='button'>");
});

$('#container').on('click', 'input[type="button"]', function (e) {
    var $this = $(this),
        new_text = $this.prev().val();
    $this.parent().addClass("test")
                  .html(new_text);
});