{"id":1402,"date":"2022-08-30T15:16:14","date_gmt":"2022-08-30T15:16:14","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/bind-jquery-events-to-div-with-specific-html-tag-like-textarea-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:14","modified_gmt":"2022-08-30T15:16:14","slug":"bind-jquery-events-to-div-with-specific-html-tag-like-textarea-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/bind-jquery-events-to-div-with-specific-html-tag-like-textarea-collection-of-common-programming-errors\/","title":{"rendered":"Bind jQuery events to DIV with specific HTML TAG like TEXTAREA-Collection of common programming errors"},"content":{"rendered":"

I have one DIV<\/code> element which contains dynamically created TEXTAREAs<\/code> and and .<\/p>\n

Currently I have bound three events on above DIV<\/code> like below<\/p>\n

jQuery(\"#uniqueId \").bind(\"click change keypress\", function(e){\n    ....\n    ....\n});\n<\/code><\/pre>\n
Now problems occur are when I click on file<\/code> input button to Browse and Upload a file or check on Checkbox I receives following error<\/p>\n
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. \n\nmyxFunction myXjavscript.js:1172\n(anonymous function) myXjavscript.js:109\nf.event.dispatch jquery-1.7.1.min.js:3\nh.handle.i\n<\/code><\/pre>\n
and because of it file<\/code> and checkbox<\/code> inputs are not working and throwing errors. I just want to bind above events only on TEXTAREA<\/code> and not other elements under a DIV<\/code>.<\/p>\n
Reason to use \"click change keypress\"<\/code> 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.<\/p>\n
How can I achieve this?<\/p>\n
    \n
  1. \n
    If you only want to bind the events to the textareas contained within #uniqueId, use the second argument (delegate selector):<\/p>\n
    jQuery(\"#uniqueId \").on(\"click change keypress\", \"textarea\", function(e){\n    ....\n    ....\n});\n<\/code><\/pre>\n
    Edit: didn’t realize you were using .bind, always use .on! It’s awesome. http:\/\/api.jquery.com\/on\/<\/p>\n<\/li>\n
  2. \n
    You should check the element before using it like,<\/p>\n
    if(jQuery(\"textarea#uniqueId\").length)\n{\n  jQuery(\"textarea#uniqueId\").bind(\"click change keypress\", function(e){\n      ....\n      ....\n  });\n}\n<\/code><\/pre>\n
    Or<\/strong> if the element is exists in page then write your code in document ready function like,<\/p>\n
    $(function(){\n  jQuery(\"textarea#uniqueId\").bind(\"click change keypress\", function(e){\n      ....\n      ....\n  });\n});\n<\/code><\/pre>\n
    Also id must be unique<\/strong> if you id<\/code> conflicts<\/code> with other elements<\/code> the you should specify element<\/code> with id like textarea#uniqueid<\/strong><\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-15 09:09:24. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1402","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1402"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1402\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}