Question

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

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

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

正确的代码应该是：

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

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

Answer 2

由于你的选择器，它会在input和select元素中触发change事件，但是change事件处理程序用于处理问题的输入元素

$(".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 3

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

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

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

jQuery事件keyup更改其他元素的html（）无法正常工作

3 个答案: