Question

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

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

在这个处理程序中，我想为单击的元素附加一个不同的单击处理程序。单击临时处理程序后，我想重新启用原始处理程序。

我正在尝试做的事情（如此fiddle所示）允许单击一段文本，将其更改为输入文本框，然后提交更改以重新创建文本。 / p>

我在the fiddle找到了以下内容但没有成功：

$('#container').on('click', '.submit', function (e) {
    var $this = $(this),
        new_text = $this.prev().val();
    e.stopPropagation();
    $this.parent().off('click.temp').html(new_text);                    
});

$('#container').on('click', '.test', function (e) {
    var $this = $(this);
    $this.html("<input type='text' value='" + $this.text() + "'/><input class='submit' value='Submit' type='submit'>");
    $this.on('click.temp', function (e) {
        e.stopPropagation();
    });
});

使用.off()似乎不会取消类上的原始处理程序，因为它附加到类而不是元素。

我想我已经用e.stopPropagation()部分回答了我的问题，但它仍然不能正常工作，我不相信我会以最好的方式解决这个问题：）

注意：This post与此想法相关，但不使用this。

Answer 1

你可以这样做：

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);

<强> Working sample

您可以将提交事件分开，如下所示：

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'>");
}

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

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

<强> Working sample

Answer 2

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

更新演示：http://jsfiddle.net/qZVzY/6/

更新代码

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));
});

Answer 3

我没有动态添加和删除输入的处理程序，而是坚持使用委托事件处理程序，就像你已经在创建输入的点击处理程序中一样：

$('#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);
});

点击“.test”div时，用你正在做的输入替换其内容，同时删除“test”类，以便进一步点击div不会做任何事情（暂时）。

单击提交按钮后，将div更改为仅显示文本，然后再次添加该类，以便前一个单击处理程序再次生效。

注意：我已将您的按钮从type="submit"更改为type="button"，因为它们实际上并未用于提交表单。

演示：http://jsfiddle.net/4vmQ4/5/

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

3 个答案:

您可以将提交事件分开，如下所示：