{"id":469,"date":"2023-05-22T14:00:00","date_gmt":"2023-05-22T14:00:00","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=469"},"modified":"2023-05-26T05:22:08","modified_gmt":"2023-05-26T05:22:08","slug":"event-handler-on-not-working-in-jquery","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/event-handler-on-not-working-in-jquery\/","title":{"rendered":"event handler .on() not working in jQuery"},"content":{"rendered":"\n<p>In my case it is not working<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery(\".date_picker_disabled\").on(\"click\", function(event){\n          alert('hi');\n  });\n\n\nsolution:<\/code><\/pre>\n\n\n\n<p>In jQuery, when you dynamically create elements or modify existing ones, attaching event handlers can be a bit tricky. However, you can solve this issue by using event delegation. Event delegation allows you to attach an event handler to a parent element that already exists on the page, which will handle events triggered by dynamically created or modified child elements.<\/p>\n\n\n\n<p>Select a suitable parent element to attach the event handler to. This could be the <code>document<\/code> object or a container element that encompasses the dynamically created elements.<\/p>\n\n\n\n<p>Use the <code>on()<\/code> method in jQuery to attach the event handler. The <code>on()<\/code> method allows you to specify the event type (e.g., <code>\"click\"<\/code>) and a selector (e.g., <code>\".date_picker_disabled\"<\/code>) to filter the elements for which the event handler should be triggered.<\/p>\n\n\n\n$(document).on(&#8220;click&#8221;, &#8220;.date_picker_disabled&#8221;, function(event) {\n  \/\/ Event handler code goes here\n});\n\n\n\n<p>the <code>click<\/code> event handler is attached to the <code>document<\/code> object, but you can replace <code>document<\/code> with the closest parent element that contains the dynamically created elements. The selector <code>\".date_picker_disabled\"<\/code> filters the elements based on their class name.<\/p>\n\n\n\n<p>Inside the event handler function, you can add the desired code that should execute when the event occurs. For example, you can display an alert.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my case it is not working In jQuery, when you dynamically create elements or modify existing ones, attaching event handlers can be a bit tricky. However,&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[213,79,214],"class_list":["post-469","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-event-handler","tag-jquery","tag-not-working"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/469\/revisions\/470"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}