Develop Reference

Backbone view change event not firing when input manipulated by code

In my Backbone model's View I have:
events: {
'change textarea' : 'changeContentTextarea',
...
When user enters a text manually into the textarea, it triggers and do this:
this.model.set('content', this.$el.find('textarea').val());
But it doesn't fire when the content is changed in program (using jQuery):
txtarea.val(finalText);
and so the model's attribute does not update and only the text in the textarea changes.
Is there any event that I can bind to address this problem?
Or how can I fire the event after I change the content using jQuery?

From https://api.jquery.com/change/
Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.
So you have to trigger the change event yourself
$("textarea").val(finalText).trigger("change");

The answer below is right and only if you need to know if the event is triggered by user or by JS, you can do this:
$("textarea").val(finalText).trigger("customChange");
and define the listen event like that:
events: {
'customChange textarea' : 'doSomethingWithJSEvent',

blur event text field jquery

I have the blur event event on a text field
$(document).on('blur', '#inputEmail', function(event){
// logic here
});
When I put some text in the field click and drag on a draggable element using jQuery draggable, the event does not execute when I drop the element.
How can I fix this? It's kind of annoying.
Thanks in advance

If you want to keep the blur event, it might be a good idea to use the tradition event delegation approach. Listen for the blur event on your input with an id of inputEmail.
$("#inputEmail").on("blur", function(event) {
alert('hi');
});
http://jsfiddle.net/1qyhjshu/1
Edit: It looks like your first example worked for me as well.
http://jsfiddle.net/vbdxwt9b/

If you want to make hit on the button only after executing the code in blur event.You may hide the button and show he button after executing the blur function.
$("#inputEmail").blur( function(event) {
//code here
$("#btn").show();
});

Textarea Auto scroll down

I know this can be done with the .change() event and put $('#console').scrollTop($('#console')[0].scrollHeight); in it.But problem is that textarea is readonly and I am using javascript to enter the text in textarea.
For ex:-
$('#console').text($('#console').text()+'\n>_ Optained Trigger');
In this case the textarea is not scrolltobottom because change event it not responding.
Any alternative for it or any other event that capture javascript text change in textarea?

You can chain jQuery operations that affect your element without the need of events:
$('#console').text($('#console').text()+'\n>_ Optained Trigger').scrollTop($('#console')[0].scrollHeight);
edit: Ok, I read your comments, and to solve that you could trigger the change event manually
//first define the event behaviour
$('#console').on('change', function(e){
var console = $(this);
console.scrollTop($('#console')[0].scrollHeight);
}
//then every time you modify the text, trigger the event
$('#console').text($('#console').text()+'\n>_ Optained Trigger').trigger('change')

OnChange event does not work properly

My OnChange event does not work properly - I want to trigger a function when user changes a textbox's value. But in my tests I have seen that the function triggers when textbox's value changes and textbox loses focus. Something wrong with my browser? Or is it about the ability of JavaScript? If the last one is true how can I can do that? Thanks in advance.

onchange event will trigger when an input field loses focus or when an option is selected from a dropdown menu, that's normal behavior.
If you want an event that will be triggered as the user types in an input field, you can use onkeypress, onkeydown or onkeyup events.

You could do with jquery:
$("textbox_id").keyup(function(){
//do something here
});

write the jquery code on keyup event and blur event also, because if user paste some copied data into textbox by using mouse only in that case only blur event called by jquery.

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.