1

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

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

在此处理程序中，我想将不同的单击处理程序附加到已单击的元素。单击临时处理程序后，我想重新启用原始处理程序。

我正在尝试做的（如this 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();
    });
});

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

我想我已经部​​分回答了我的问题e.stopPropagation()，但它仍然不是很有效，我不相信我会以最好的方式解决这个问题:)

注意：这篇文章与想法有关，但不使用this.

4

3 回答 3

2

你可以像下面这样简单地做到这一点：

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

工作样本

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

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

工作样本

于 2012-07-12T05:15:26.627 回答
1

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

更新演示：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));
});
于 2012-07-12T05:04:34.677 回答
1

我不会即时添加和删除输入的处理程序，而是坚持使用委托的事件处理程序，就像您已经在创建输入的单击处理程序中所做的那样：

$('#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/

于 2012-07-12T05:29:24.497 回答