Question

我使用jQuery并对项目列表进行迭代。每个项目都放在屏幕上，可以拖动。非常项目也有一个textarea。

源代码：

$.each(data, function(id, project) {
    $('#projects').append('<div class="note" data-projectid="'+project.id+'"><textarea class="edit">'+project.text+'</textarea></div>');
});
$(".note").draggable({
    containment: "#projects", 
    scroll: false
});

我想要的是知道用户是否更改了项目的文本，因此我需要知道光标是否离开了textarea。我需要知道新文本和数据项目，所以我可以保存新文本（进入后端系统中的数据库）。

提前感谢你的帮助，蒂姆 - 。

Answer 1

如果您说您想知道用户是否编辑了<textarea>元素的内容，请将a .delegate()处理程序放在侦听#projects的{{1}}元素上change元素中的事件。

textarea.edit

页面加载时只执行一次。它适用于您附加到$('#projects').delegate('textarea.edit','change',function() { alert('was changed'); });容器的所有<textarea>元素。

Answer 2

当文本发生更改时，会发生onchange事件，当光标离开时，会触发onblur事件：

$('.edit').change(function(){
  alert(this.value);
});

$('.edit').blur(function(){
  // cursor left text area
});

Answer 3

你正在寻找的事件是.blur（），这个事件在一个元素失去焦点时执行，所以对于ex。

$.each(data, function(id, project) {
    $('#projects').append('<div class="note" data-projectid="'+project.id+'"><textarea class="edit">'+project.text+'</textarea></div>');
    $('textbox').blur(function() {
        $(this).val(); //gives you the current value of the box.
        //then do what you need with that info. also the project obj is still available to get project.id from
        var data-projectid = project.id

    });
});

jQuery - 用户编辑textarea内容的事件

3 个答案: