{"id":1116,"date":"2012-08-06T21:59:35","date_gmt":"2012-08-06T21:59:35","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1116"},"modified":"2012-08-06T21:59:35","modified_gmt":"2012-08-06T21:59:35","slug":"jquery-disable-link-jquery-disable-link-onclick","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-disable-link-jquery-disable-link-onclick\/","title":{"rendered":"jQuery Disable Link onClick Examples &#8211; 1 line code"},"content":{"rendered":"<p>Did you ever want to <em><strong>disable link onClick using jQuery<\/strong><\/em> but always wondered how to do it? In this article, I am going to share with you a very easy way to disable a hyperlink using jQuery. That means that whenever you click on a hyperlink, it will no longer navigate to the linked page and you will remain on the page that you are currently on. The actual code is just 1 line, so it&#8217;s super easy to follow along. Read on to find out more.<!--more--><\/p>\n<h2>Examples on using jQuery to Disable Link onClick<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1116\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;s assume that we have a hyperlink with class &#8220;.my_link&#8221; and we would like to disable this hyperlink so that when it is clicked, the page does not navigate to the linked page. Here is how you can do it very easily:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Example to disable link on click\">$(\".my_link\").click(function(e) {\n\n\/\/You can do some other stuff, like show alert\nalert('You clicked me!');\n\n\/\/the following line of code disables the hyperlink\ne.preventDefault();\n});<\/pre>\n<p>So as shown in the above code, for events such as onClick, etc. you can easily prevent the default behavior by\u00a0calling event.preventDefault() in the event handler of the element (in this case, the hyperlink). So now you know using <strong>jQuery disable link onClick<\/strong> can be achieved with just 1 line of code.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1116\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Simple, isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways to <em><strong>disable a hyperlink onClick using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you ever want to disable link onClick using jQuery but always wondered how to do it? In this article, I am going to share with you a very easy way to disable a hyperlink using jQuery. That means that whenever you click on a hyperlink, it will no longer navigate to the linked page [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,43,41],"class_list":["post-1116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-i0","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1116"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}