{"id":111,"date":"2015-01-12T13:54:47","date_gmt":"2015-01-12T13:54:47","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=111"},"modified":"2023-10-05T10:32:18","modified_gmt":"2023-10-05T10:32:18","slug":"jquery-on-click-change-events-7-examples","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/","title":{"rendered":"jQuery $.on Method"},"content":{"rendered":"

The jQuery $.on method<\/strong><\/h3>\n

In a simple definition, you can say the $.on<\/em><\/strong> method is a longer version of event methods like click<\/em>, dbclick<\/em>, change<\/em>, hover, keyUp, keyDown,<\/em> and others.<\/p>\n

The jQuery allows you to use the shorthand of events like click event<\/a> and other events. However, the\u00a0.on<\/em><\/strong> method not only allows you to use these methods alone but you can attach multiple event handlers by using it once.<\/p>\n

For example, you want to perform the same action as the user clicks, changes or presses a key in an element. Rather than writing the code for each event handler separately, you can specify all in single jQuery .on method. Similarly, you can perform different actions for different events by using single $.on method.<\/p>\n

In fact, the jQuery on method is more than that. From the 1.7 version<\/strong> of jQuery, the on<\/em><\/strong> method replaced delegate, live,<\/em> and bind<\/em> methods as well.<\/p>\n

The examples in this tutorial will show you different forms of using .on<\/strong> jQuery<\/strong> method. You can also see how .on<\/em> method replaces other methods of jQuery.<\/p>\n

An example of jQuery on click <\/strong><\/h3>\n

In this example, I\u00a0will use the single event handler in .on (with click)<\/em> method. For that, I have created a div element with a border. As you click inside the div, an alert will be shown.<\/p>\n

\"jquery<\/p>\n

jQuery Code for this example with HTML<\/strong><\/p>\n

<!DOCTYPE html>\r\n<head>\r\n<script src=\"\/\/code.jquery.com\/jquery-1.10.2.js\"><\/script>\r\n<script>\r\n$(document).ready(function(){\r\n    $(\".clickcls\").on(\"click\",function(){\r\n    alert(\"You have clicked inside Div!\");\r\n    });\r\n});\r\n<\/script>\r\n\r\n<style>\r\n.clickcls{\r\nwidth:300px;\r\nheight:300px;\r\nborder: 1px solid blue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"clickcls\">Click with on method example<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
As you can see inside on method, the click event is given where an alert is also used:<\/p>\n
$(“.clickcls”).on(“click”,function(){<\/em><\/p><\/blockquote>\n
The $.on method with click and change event handlers<\/strong><\/h3>\n
In this example, I will attach two event handlers i.e. on change and click<\/em>. For that, I\u00a0have created a text area element. As you click inside the\u00a0textarea, the alert will be shown as click event occurs. Similarly, the change event will occur as you change the text (type in something) and get out of text area, the alert will be shown as well.<\/p>\n
Note that, multiple event handlers are separated by space.<\/p>\n
\"jquery<\/p>\n
Complete Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<head>\r\n<script src=\"\/\/code.jquery.com\/jquery-1.10.2.js\"><\/script>\r\n<script>\r\n$(document).ready(function(){\r\n    $(\".clickcls\").on(\"click change\",function(){\r\n    alert(\"Click or change event occured\");\r\n    });\r\n});\r\n<\/script>\r\n\r\n<style>\r\n.clickcls{\r\nwidth:300px;\r\nheight:200px;\r\nborder: 2px solid red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<textarea class=\"clickcls\">Click and change with on method example <!--Closing tag of textarea here-->\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
As you can see, multiple events are specified after jQuery on method (change and click) as follows:<\/p>\n
$(“.clickcls”).on(“click change”,function()<\/em><\/p><\/blockquote>\n
Specifying multiple handlers are quite useful to perform the same action for different events. You can specify even more event handlers, just separate it by spaces. See this line:<\/p>\n
$(“.clickcls”).on(“click change mouseenter”,function(){<\/em><\/p><\/blockquote>\n
You can see the\u00a0.on<\/em> with change, click, and mousenter<\/em>. Now alert will be triggered as the mouse enters the textarea, as well.<\/p>\n
An example of .on with colored div<\/strong><\/h3>\n
In this example of jQuery on method, I\u00a0have created five different colored div and a larger div to the right. The right div is kept white. I\u00a0used .on jQuery method with each div element and used different event handlers for div as follows:<\/p>\n
\"jquery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
As you bring the mouse over red div, the color of the larger div will be changed to red as I\u00a0used $.on with mouseenter<\/em> and click<\/em> events.<\/p>\n
The green div color will be changed with double click\u00a0 –<\/p>\n
$(“#div2”).on(“dblclick”, function()<\/em><\/strong><\/p><\/blockquote>\n
As you leave mouse from third div (which is yellow) the color of the right div will be changed to the yellow because $.on method is attached to mouseleave event<\/em>.<\/p>\n
The last two div again using mouseneter<\/em> and click<\/em> respectively to change the color of right div.<\/p>\n
Different functionality to events in $.on method example<\/strong><\/h3>\n
In above examples, I have attached the same event handler to multiple events. By using jQuery $.on<\/em><\/strong> method, you can attach multiple events with different functionality as well. For example, doing some action as mouseenter<\/em> event takes place inside a div element like fading in its background color and returning it back to the same color as mouseleave<\/em> event occurs in that div.<\/p>\n
The following example shows how to use different functionality for different events.<\/p>\n
\"jquery<\/p>\n
jQuery Code with HTML:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<head>\r\n<script src=\"\/\/code.jquery.com\/jquery-1.10.2.js\"><\/script>\r\n<script>\r\n$(document).ready(function(){\r\n\r\n    $( \"#div1\" ).on({\r\n      mouseenter: function() {\r\n        $(\"#chgcolor\").css(\"background-color\",\"red\");\r\n      }, mouseleave: function() {\r\n        $(\"#chgcolor\").css(\"background-color\",\"white\");\r\n      }\r\n    });\r\n\r\n});\r\n<\/script>\r\n\r\n<style>\r\n#div1{\r\nwidth:30px;\r\nheight:50px;\r\nbackground-color:red;\r\n}\r\n\r\n#chgcolor{\r\nwidth:100px;\r\nheight:100px;\r\nbackground-color:white;\r\nborder:1px solid black;\r\nmargin-top:-50px;\r\nmargin-left:100px\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"div1\"><\/div>\r\n<div id=\"chgcolor\"><\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
You can see as you bring mouse inside the red div the color of the right div is changed to red and as you bring the mouse out of left div the color of right div will be changed to white.<\/p>\n
This is done by using the following code:<\/p>\n
mouseenter event:\r\n\r\nmouseenter: function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(\"#chgcolor\").css(\"background-color\",\"red\");\r\n\r\nmouseleave event:\r\n\r\nmouseleave: function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(\"#chgcolor\").css(\"background-color\",\"white\");<\/pre>\n
$.on method as replacement of live method example<\/strong><\/h3>\n
As such the live method attaches one or more event handlers to specified element that executes for the parent as well as current or future child elements as well. From 1.9 version of the\u00a0jQuery, this method is removed and replaced by $.on jQuery method.<\/p>\n
The following example shows how .on<\/em> method is used to replace live<\/em> method of jQuery. In the\u00a0example, I\u00a0have created a parent div element with a child paragraph. Inside script section, the .on method is used to create the\u00a0future child elements, i.e. paragraphs of div. A function,\u00a0on_livefunction<\/em>\u00a0is created that shows an alert which is called in $.on method.<\/p>\n
\"jquery<\/p>\n
Code that you can copy and try in your editor:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7\/jquery.min.js\"><\/script>\r\n<script>\r\n$(document).ready(function(){\r\n\r\n$('#on_livediv').on('click', on_livefunction);\r\n  $('#on_livediv').click(function(){\r\n    $(\"<p>The new paragraph, or child element of Div<\/p>\").insertAfter(\"#livep\");\r\n  });\r\n});\r\n \r\nfunction on_livefunction() {\r\n    alert(\"parent or child paragraph clicked\");\r\n  }\r\n \r\n<\/script>\r\n<style>\r\n#on_livediv{\r\nwidth:250px;\r\nfont-weight:bold;\r\nfont-size:15px;\r\npadding:10px;\r\nborder:1px solid red;\r\n}\r\np{\r\nwidth:200px;\r\nfont-weight:normal;\r\nborder:1px solid green;\r\npadding:2px;\r\n}\r\n<\/style> \r\n<\/head>\r\n \r\n<body>\r\n\r\n<div id=\"on_livediv\">Parent Div element\r\n<p id=\"livep\">Paragraph - child of parent div <\/p>\r\n<\/div>\r\n\r\n \r\n<\/body>\r\n \r\n<\/html>\r\n\r\n<\/pre>\n
When you click on div or paragraph the alert will be shown in both cases. You have to specify event name(s) and function in jQuery .on method as I\u00a0did in this line:<\/p>\n
$(‘#on_livediv’).on(‘click’, on_livefunction);<\/em><\/strong><\/p><\/blockquote>\n
When you click on new paragraphs (child of div), the function will be called and executed and an alert will be shown just like in parent div element.<\/p>\n
In case, you do not want to execute a function or event handler to the parent element and just to child elements, jQuery had delegate method which is also replaced by $.on method<\/strong>. See the next section for learning how $.on method replaced the delegate method.<\/p>\n
$.on method as replacement of delegate method<\/strong><\/h3>\n
In delegate method, the event handler is attached to child element(s) of the specified element. The child element(s) can be current or future elements. However, from 1.7 version of jQuery the preferred method to accomplish this task is by using $.on method.<\/p>\n
If you have gone through the above example of using .on as a replacement for the .live method then it is quite easier to understand. You simply need to specify child element after giving event names in the parameters section of jQuery on method.<\/p>\n
\"jquery<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"\/\/code.jquery.com\/jquery-1.10.2.js\"><\/script>\r\n<script>\r\n$(document).ready(function(){\r\n\r\n$('#on_delegatediv').on('click', 'p', on_livefunction);\r\n  $('#on_delegatediv').click(function(){\r\n    $(\"<p>The new paragraph, or child element of Div<\/p>\").insertAfter(\"#livep\");\r\n  });\r\n});\r\n \r\nfunction on_livefunction() {\r\n    alert(\"Child paragraph clicked\");\r\n  }\r\n \r\n<\/script>\r\n<style>\r\n#on_delegatediv{\r\nwidth:250px;\r\nfont-weight:bold;\r\nfont-size:15px;\r\npadding:10px;\r\nborder:1px solid red;\r\n}\r\np{\r\nwidth:200px;\r\nfont-weight:normal;\r\nborder:1px solid green;\r\npadding:2px;\r\n}\r\n<\/style> \r\n<\/head>\r\n \r\n<body>\r\n\r\n<div id=\"on_delegatediv\">Demo of $.on as replacement of delegate! Click on div text\r\n<p id=\"livep\">Paragraph - child of parent div <\/p>\r\n<\/div>\r\n\r\n \r\n<\/body>\r\n \r\n<\/html>\r\n\r\n<\/pre>\n
If you click on div text where it says \u201cDemo of $.on as replacement of delegate! Click on div text<\/em>\u201d or paragraph, a new paragraph will be added by using insertAfter<\/em> in the script section, which is the future child of parent div. However, note the difference in code and output than the above example here:<\/p>\n
$(‘#on_delegatediv’).on(‘click’, ‘p’, on_livefunction);<\/p><\/blockquote>\n
Where I\u00a0specified \u2018p\u2019 as the child in $.on method. If you click on div text, no alert will be shown and just paragraph will be inserted. However, as you click on the current or new paragraph, an alert will be shown along with a new paragraph will be added. While in the\u00a0case of $.live replacement of $.on example, the div was also showing an\u00a0alert\u00a0which means event handler (the function) was executing for both parent and child while in this case event handler only executed for the\u00a0child element.<\/p>\n
An example of $.on method with button click and animation<\/strong><\/h3>\n
This is a more interactive example of using the .on method<\/strong> of jQuery. In this example, I\u00a0will create an animation by using a div element. The $.animate method<\/a> of jQuery is used to create that animation. The $.on method is linked with the button\u2019s click event.<\/p>\n
As you click on the button, the .on method will attach an event handler on click event of the button. Have a look at live demo of this example along with code:<\/p>\n
\"jquery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
As you can see, the jQuery on method specifies a click event along with calling a function animateex<\/em>. The animateex<\/em> uses the $.animate<\/em><\/strong> method that changes div properties and after completing, the animation calls another function animateback<\/em> that takes animation back to its original style at the end it also calls animateex<\/em> function, so the\u00a0process goes on.<\/p>\n
Also note, for color animation, I have included the jQuery UI<\/a> library in the above demo.<\/p>\n","protected":false},"excerpt":{"rendered":"
The jQuery $.on method In a simple definition, you can say the $.on method is a longer version of event methods like click, dbclick, change, hover, keyUp, keyDown, and others. The jQuery allows you to use the shorthand of events like click event and other events. However, the\u00a0.on method not only allows you to use … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":114,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"yoast_head":"\njQuery $.on - 7 examples with Click, Change and other Events<\/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:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery $.on - 7 examples with Click, Change and other Events\" \/>\n<meta property=\"og:description\" content=\"The jQuery $.on method In a simple definition, you can say the $.on method is a longer version of event methods like click, dbclick, change, hover, keyUp, keyDown, and others. The jQuery allows you to use the shorthand of events like click event and other events. However, the\u00a0.on method not only allows you to use ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-12T13:54:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-05T10:32:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/01\/jquery_on_click_change_mouseleave_12_0_3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"362\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/\",\"url\":\"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/\",\"name\":\"jQuery $.on - 7 examples with Click, Change and other Events\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2015-01-12T13:54:47+00:00\",\"dateModified\":\"2023-10-05T10:32:18+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery $.on Method\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery $.on - 7 examples with Click, Change and other Events","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:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/","og_locale":"en_US","og_type":"article","og_title":"jQuery $.on - 7 examples with Click, Change and other Events","og_description":"The jQuery $.on method In a simple definition, you can say the $.on method is a longer version of event methods like click, dbclick, change, hover, keyUp, keyDown, and others. The jQuery allows you to use the shorthand of events like click event and other events. However, the\u00a0.on method not only allows you to use ... Read more","og_url":"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/","article_published_time":"2015-01-12T13:54:47+00:00","article_modified_time":"2023-10-05T10:32:18+00:00","og_image":[{"width":362,"height":260,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/01\/jquery_on_click_change_mouseleave_12_0_3.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/","url":"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/","name":"jQuery $.on - 7 examples with Click, Change and other Events","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2015-01-12T13:54:47+00:00","dateModified":"2023-10-05T10:32:18+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"jQuery $.on Method"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/111"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":10,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":10626,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/111\/revisions\/10626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/114"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}