jQuery事件keyup用于更改其他元素的html()

Question

当任何数据输入到相关的<input>字段时，我正试图更改<span>中的文本。所以我使用以下脚本。

jQuery(".selector").live({
    'paste keyup input' : function () {
        var val = $(this).val();
        var dest_class = $(this).attr('class') + '_' + $(this).attr('dest');
        $('.' + dest_class).html(val);
    },
    change: function () {
        var id = $(this).attr('id') + " option:selected";
        var val = $("#" + id).text();
        var dest_class = $(this).attr('class') + '_' + $(this).attr('dest');
        $('.' + dest_class).html(val);
    }
});

代码几乎正常工作。我面临的问题是第一件事。当<input class="cell_value" ...>中出现任何列出的事件时，目的地的html都会发生变化，但当我单击外部或按TAB键时，对目的地<span>所做的所有更改都会消失。

如果我按Enter键，则值将保留在目的地，但仅在我再次编辑输入之前。

第二个事件，即"更改"运行良好。

任何关于我做错了什么的建议。

这是这个的小提琴链接http://jsfiddle.net/k6ru4/1/

Answer 1

这是因为您的选择器，它在输入和选择元素中都触发了更改事件，但更改事件处理程序是为处理问题的输入元素而设计的

$(".selector").live({
    'paste keyup input change' : function () {
        var val, $this = $(this); 
        if($this.is('select')){
            val = $this.find('option:selected').text();
        } else {
            val = $this.val();
        }
        var dest_class = $(this).attr('class') + '_' + $(this).attr('dest');
        $('.' + dest_class).html(val);
    }
});

演示：Fiddle

Answer 2

在您的更改处理程序中，您使用的是.text()，而本应使用.val()。更改内容后弹出会导致文本框触发更改事件。

正确的代码应该是：

....
'change' : function () {
    ...
    var val = $("#" + id).val(); // val() instead of text()
    ...
}
....

演示：http://jsfiddle.net/k6ru4/4/

Answer 3

在更改函数上使用append（）而不是html（）

$('.' + dest_class).append(val);

http://jsfiddle.net/k6ru4/5/