Bind jQuery events to DIV with specific HTML TAG like TEXTAREA-Collection of common programming errors
I have one DIV
element which contains dynamically created TEXTAREAs
and and .
Currently I have bound three events on above DIV
like below
jQuery("#uniqueId ").bind("click change keypress", function(e){
....
....
});
Now problems occur are when I click on file
input button to Browse and Upload a file or check on Checkbox I receives following error
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
myxFunction myXjavscript.js:1172
(anonymous function) myXjavscript.js:109
f.event.dispatch jquery-1.7.1.min.js:3
h.handle.i
and because of it file
and checkbox
inputs are not working and throwing errors. I just want to bind above events only on TEXTAREA
and not other elements under a DIV
.
Reason to use "click change keypress"
events together because in Chrome I am performing Dynamic operations on Textarea to get cursor position after add/edit/delete texts from Textarea. So to record all those things I needed to add those three events.
How can I achieve this?
-
If you only want to bind the events to the textareas contained within #uniqueId, use the second argument (delegate selector):
jQuery("#uniqueId ").on("click change keypress", "textarea", function(e){ .... .... });
Edit: didn’t realize you were using .bind, always use .on! It’s awesome. http://api.jquery.com/on/
-
You should check the element before using it like,
if(jQuery("textarea#uniqueId").length) { jQuery("textarea#uniqueId").bind("click change keypress", function(e){ .... .... }); }
Or if the element is exists in page then write your code in document ready function like,
$(function(){ jQuery("textarea#uniqueId").bind("click change keypress", function(e){ .... .... }); });
Also id must be unique if you
id
conflicts
with otherelements
the you should specifyelement
with id like textarea#uniqueid
Originally posted 2013-11-15 09:09:24.