CODEWITHSUNDEEP
javascriptjqueryhtml
Andika Trisna Adhi
Andika Trisna Adhi

Reputation: 55

Disable a href after click once and add new element at the same time?


Is it posible to add new element with javascript by using href and disable href at the same time?
So href only clicked once, and after that the new element will appear. I wrote this code, but still no luck

JS

 $(document).ready(function() {
 $("#add_app").click(function() {
   $("#box").append("<p>jQuery is Amazing...</p>"); 
   this.removeAttribute('href');this.className='disabled';
 }});

HTML

<a href="#" id="add_app" ><strong>Summon new element and disable me</strong></a>

The only does the job is in JS line

$("#box").append("<p>jQuery is Amazing...</p>");

Need help.. Thanks

--------------------------------------UPDATE---------------------------------
-Using improved code by PacMan, Linus Aronsson, and guest271314 and it works like a charm. So basically we use .one() event handler to solve the problem. Thanks for the feedback guys

Upvotes: 1

Views: 135

Answers (4)

ThaTal
ThaTal

Reputation: 11

you need to return false whwn the link is click. try this one JQuery code..

$("#add_app").click(function() {
   $("#box").append("<p>jQuery is Amazing...</p>");
   return false;
});

Upvotes: 0

PacMan
PacMan

Reputation: 1358

you can try this

HTML

<a style="cursor: pointer;"  id="add_app" ><strong>Summon new element and disable me</strong></a>
<div id="box"></div>

and in your JS code you can write this i have tested it and it worked fine

$(function(){
  $("#add_app").one("click",function(){
    $("#box").append("<p>jQuery is Amazing...</p>");
  });
 });

Upvotes: 1

Linus Aronsson
Linus Aronsson

Reputation: 341

Use this jQuery:

$(document).ready(function() {
    $("#add_app").one("click", function() {
    $("#box").append("<p>jQuery is Amazing...</p>"); 
    this.removeAttribute('href');
  });
});

I'm using the .one() event handler to indicate that you only want the click event to take place once. The rest of the code was more or less correct with a few small changes.

Here's a fiddle: https://jsfiddle.net/0mobshpr/1/

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use .one(); note js at Question is missing closing parenthesis ) at click()

 $(document).ready(function() {
   $("#add_app").one("click", function() {
     $("#box").append("<p>jQuery is Amazing...</p>"); 
     this.removeAttribute('href');this.className='disabled';
   })
});

Upvotes: 1

Related Questions