Question

I use jQuery and make an iteration over a list of projects. Every project is put on the screen and it is draggable. Also very project has a textarea.

Source code:

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

What I want, is to know if a user change the text of the project, so I need to know if the cursor leaves the textarea. And I need to know the new text and the data-projectid, so I can save the new text (into a database which is located in the backend system).

Thank you in advance for your help, Tim-.

Answer 1

If you’re saying you want to know if the user edited the content of the <textarea> elements, place a .delegate() handler on the #projects element that listens for a change event in the textarea.edit elements.

$('#projects').delegate('textarea.edit','change',function() {
    alert('was changed');
});

Do this only once when the page loads. It will work for all <textarea> elements that you append to the #projects container.