Develop Reference

How to detect when a textarea value is changed by a script?

I would like to check a textarea when the value inside it is changed by program.
The code is quite complex so I would rather use an event listener instead of looking for the exact line of code.
Here is how I check:
$(".edit.btn.btn-default").on("click", function(){
alert($("#attribute_fabric_en").val());
$("#attribute_fabric_en").on("input propertychange",function(){
alert("test");
});
});
The result: alert($("#attribute_fabric_en").val()); prints an empty string, but the textarea later on will be assigned a value by script; but the listener is not triggered.
At least Chrome tested is not work to capture the event

There is an event for that, in jQuery you can use $('.textareaId').on('change', console.log($('#textareaId').html()), It is that simple !
EDIT:
Maybe you don't want to use jQuery, click event is for textarea, contentediatble divs, etc and input event is for form elements such as
textArea.addEventListener('change', function(e){ ... }, false);\n
inputElement.addEventListener('input', function(e) { ... }, false);

bind .keyup to dynamically created element

I have seen a bunch of questions on this but im still stumped. I could realy use some help understanding what im doing wrong here.
(my terminology may not be correct below)
I have a textarea and a .keyup function bound to it by class name
This first textarea fires the function fine
I then add a second textarea dynamically which is intended to fire the same function
My .keyup function
$('.trans').keyup(function() {
alert("Working");
});
I understand that the above doesnt work on the newly created textarea because it wasnt part of the DOM when the function was bound. I have tried several ansers to other questions but cant seem to get this working:
Other things Ive tried:
// I also tried this
// Neither textarea responds if this is used
$('.trans').on('keyup', '.newTrans', function() {
alert("Working");
});
// I also tried this
// Only the first textarea responds
$('.trans').delegate('.newTrans', 'keyup', function(){
alert("Working");
});
Here is a JSfiddle with more of the code im using if needed:
jSfiddle

The .on() method isn't going to work in your fiddle at all because you have specified an old version of jQuery from before .on() was introduced.
If you upgrade to a newer version of jQuery (at least 1.7) you can do this:
$(document).on('keyup', '.trans', function() {
alert("Working");
});
Demo: http://jsfiddle.net/VFt6X/4/
If you need to keep using v1.6.4 for some reason then use the .delegate() method instead:
$(document).delegate('.trans', 'keyup', function() {
alert("Working");
});
Demo: http://jsfiddle.net/VFt6X/5/
Note that either way the '.trans' selector for the elements you care about is passed as a parameter to the function. The $(...) part on the left has to specify some container that already exists. I've used document, but it is better to specify something closer to the elements in question if possible, so in your case you could use $("#centerNotes").

Try this:
$('.trans').live('keyup', function() {
alert("Working");
});
http://jsfiddle.net/VFt6X/3/

jquery on() change on textbox not working using jQ 1.8.3

I am using jquery 1.8.3 so trying to change from using .live() to the .on()
Like many others on SO - cant get it worrking - what am i doing wrong? If its so wrong to use .live()
why does it work so consistently well!
( txtbxhost is a textbox NOT added dynamically its already in the DOM )
$('#txtbxhost').live('input', function() {
// works everytime
});
$('#txtbxhost').on('change', 'input', function() {
// fails everytime
});
and
$('#txtbxhost').on('change', '#txtbxhost', function() {
// fails everytime
});
and
$(document).on('change', '#txtbxhost', function() {
// fails everytime
});
i'm out of ideas here ... help ...

You probably want:
$(document).on('input', '#txtbxhost', function() {
// code here
});
Check this fiddle
Also, change works only when you blur - In other words click elsewhere after you change text in the texbox.
So, this should work too
$(document).on('change', '#txtbxhost', function() {
// fails everytime
});
Check the updated fiddle

You need to understand how on() differs in behavior to live().
There are really two main approaches to using on(). If the element you are interested in exists on the page at load, you can consider directly binding the event like this:
$('#txtbxhost').on('input', function () {
// some function
});
This would work in much the same way as change() would.
If the element may not exist at page load then you need to work with delegated events. To do this, you must attach the on() to an element that does exist at page load. This can be document or would typically be the closest ancestor to the element the you are interested in that exists on page load. This delegation works by looking at the event bubbling up the DOM element stack to the element to which you bind on(), you then look for a selector within that element to apply the callback to. This looks like this:
$('#some_static_ancestor').on('input', '#txtbxhost', function () {
// some function
});

$(function(){
$('#txtbxhost').on('input', function() {
// do stuff
});
});
That should do it.
In your case you don't really need to use .on(), it's main purpose is to deal with dynamically created elements.

jQuery keypress event not firing

I have a form that when the user hits edit, it changes the field from text to a textbox with a class of cat_name_edit.
The following code does not trigger when pressing any key in the textbox. Could it have something to do with the fact that I've already changed the text into a textbox?
$(".cat_name_edit").keypress(function() {
alert("hi");
});
I've also tried .click() and .keydown() with no luck. Any ideas?

Ok, apparently I had to use .live()

I think the elements are not present on page load so the events are not attached. Try using jQuery live.
$(".cat_name_edit").live('keypress', (function() {
alert("hi");
});

I put this into a fiddle keypress() works fine:
$(".cat_name_edit").keypress(function(e) {
$(this).replaceWith("<textarea class=\"cat_name_edit\"></textarea>");
$("textarea.cat_name_edit").focus();
});
keyup() would have worked too.
I've also gone to the liberty of making the function that replaces the input with a textarea.

or you could also use EventDelegation. Attach your click event to the parent which contains these textboxes, and in the function check if the target that was clicked has the class cat_name_edit and then perform your operation.

Does .live() binding work for jQuery in IE7?

I have a piece of javascript which is supposed to latch onto a form which gets introduced via XHR. It looks something like:
$(document).ready(function() {
$('#myform').live('submit', function() {
$(foo).appendTo('#myform');
$(this).ajaxSubmit(function() {
alert("HelloWorld");
});
return false;
});
});
This happens to work in FF3, but not in IE7. Any idea what the problem is?

The submit event is not currently supported by Events/live.
Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

How are you excuting the submit? Can you try this instead?
$(':submit').live('click', function(e) {
$(foo).appendTo('#myform');
$('#myform').ajaxSubmit(function() {
alert('Hello World');
});
e.preventDefault();
return false;
});

Re CMS above, in JQuery 1.4, live is supposed to work with 'submit', but seems to still not with IE7. I'm going to try delegate instead and see if that helps.