1

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

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

如果我按 Enter ，则该值将保留在目标中，但直到我再次编辑输入为止。

第二个事件，即“更改”工作正常。

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

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

4

3 回答 3

0

在更改函数上使用 append() 而不是 html()

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

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

于 2013-07-11T13:47:29.990 回答
0

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

正确的代码应该是：

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

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

于 2013-07-11T13:44:50.010 回答
0

这是因为您的选择器，它会在 input 和 select 元素中触发 change 事件，但 change 事件处理程序旨在处理问题的 input 元素

$(".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);
    }
});

演示：小提琴

于 2013-07-11T13:45:18.100 回答