{"id":14664,"date":"2022-10-08T17:13:20","date_gmt":"2022-10-08T11:43:20","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/"},"modified":"2022-10-08T17:13:20","modified_gmt":"2022-10-08T11:43:20","slug":"solved-javascript-function-not-firing-on-click","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/","title":{"rendered":"[Solved] Javascript function not firing on click"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

The first (and generally only) argument to an event callback is the event data itself. This is done by the browser JS engine and is not something you can influence or choose yourself.<\/p>\n

To get the item clicked on, within the callback context, you can always reference this<\/code>.<\/p>\n

See example below (in order to make a runnable demo I’ve commented out the ajax part, the purpose is to demonstrate the correct use of this<\/code>).<\/p>\n<\/p>\n

\n
\n
$(document).on(\"click\", \".employeeComplete\", employeeReg);\r\n\r\nfunction employeeReg(event) {\r\n  var self = $(this);\r\n  var stats = {};\r\n  stats['age'] = 'age';\r\n  stats['name'] = name;\r\n  \/*        $.post('employee', stats)\r\n          .done(function(e){\r\n              alert(\"hello\");\r\n              if(e){\r\n                  alert(\"This employee has been registered.\");\r\n                  self.attr('disabled', 'disabled');\r\n                  self.css('background-color', '#111111');\r\n\r\n              }\r\n              else{\r\n                  alert(\"Error.\");\r\n              }\r\n          })\r\n          .fail(function(){\r\n              alert(\"Error.\");\r\n          });*\/\r\n\r\n  alert(\"This employee has been registered.\");\r\n  self.css('background-color', '#111111');\r\n  self.attr(\"disabled\", \"disabled\");\r\n}<\/code><\/pre>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<button class=\"employeeComplete\">Click to test<\/button><\/code><\/pre>\n<\/div>\n<\/div>\n
N.B. Also consider switching “.attr” for “.prop” – see documentation at http:\/\/api.jquery.com\/attr\/<\/a> which states: “As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.” . There is also a more detailed discussion of why this is the case.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Javascript function not firing on click <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] The first (and generally only) argument to an event callback is the event data itself. This is done by the browser JS engine and is not something you can influence or choose yourself. To get the item clicked on, within the callback context, you can always reference this. See example below (in order to … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[2196,333,388],"class_list":["post-14664","post","type-post","status-publish","format-standard","hentry","category-solved","tag-events","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] Javascript function not firing on click - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Javascript function not firing on click - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The first (and generally only) argument to an event callback is the event data itself. This is done by the browser JS engine and is not something you can influence or choose yourself. To get the item clicked on, within the callback context, you can always reference this. See example below (in order to ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-08T11:43:20+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Javascript function not firing on click\",\"datePublished\":\"2022-10-08T11:43:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/\"},\"wordCount\":157,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"events\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/\",\"name\":\"[Solved] Javascript function not firing on click - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-08T11:43:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Javascript function not firing on click\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Javascript function not firing on click - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Javascript function not firing on click - JassWeb","og_description":"[ad_1] The first (and generally only) argument to an event callback is the event data itself. This is done by the browser JS engine and is not something you can influence or choose yourself. To get the item clicked on, within the callback context, you can always reference this. See example below (in order to ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/","og_site_name":"JassWeb","article_published_time":"2022-10-08T11:43:20+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Javascript function not firing on click","datePublished":"2022-10-08T11:43:20+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/"},"wordCount":157,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["events","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/","url":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/","name":"[Solved] Javascript function not firing on click - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-08T11:43:20+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-function-not-firing-on-click\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Javascript function not firing on click"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=14664"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14664\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=14664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=14664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=14664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}