CODEWITHSUNDEEP
javascriptjqueryhtml
Tauseef Hussain
Tauseef Hussain

Reputation: 1079

Jquery: Append div only once 'on click'

I am trying to append a section to a div on the click of a button.

I want the section to be appended only on the first click, the code that I use below appends a section every time I click the div.

How should I go about this?

$("#nextractorapply").click(function () {
    $("#main").append('<section id="nextractor" class="five"> </section>');  
});

Upvotes: 23

Views: 63437

Answers (7)

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

$("#nextractorapply").click(function () {
    $("#main").empty().append('<section id="nextractor" class="five"> </section>');  
});

Upvotes: 0

ronangr1
ronangr1

Reputation: 57

You could set a variable and fire event if variable is set as true or false.

var _clicked = false;

$('.element').click(function(){
  if(!_clicked){
   _clicked = true;
   console.log('event fired');
  }
})

Upvotes: 1

amir22
amir22

Reputation: 423

You could check if the element has a default class, append html. For example you could add a class to html code like : class="first", and after first click remove that class.

A code something like this :

var element = $("#nextractorapply");
    if(element.hasClass("first")){
          $("#main").append('<section id="nextractor" class="five"> </section>');  
          element.removeClass("first");
    }

And then after first click, the "first" class will be removed from your html and Jquery will not append any further html.

Upvotes: 0

Amar Singh
Amar Singh

Reputation: 5622

You could use .unbind()

$("#nextractorapply").unbind().click(function () {
    $("#main").append('<section id="nextractor" class="five"> </section>');  
});

Upvotes: 3

Hemal
Hemal

Reputation: 3760

You can use some kind of a condition that prevents its appending multiple times.

var counter=0;
$("#nextractorapply").click(function () {
    if(counter<=0){
        $("#main").append('<section id="nextractor" class="five"> </section>');  
        counter++;
    }

    //YOUR OTHER STUFF THAT YOU NEED TO EXECUTE ON EVERY CLICK
});

Upvotes: 9

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

Use a conditional to determine if it's there.

$("#nextractorapply").click(function () {
    if($('#nextractor').length < 0){
        $("#main").append('<section id="nextractor" class="five"> </section>');
    }  
});

Upvotes: 16

adeneo
adeneo

Reputation: 318202

You could use one(), which fires only once

$("#nextractorapply").one('click', function () { 
    // executes only once

     $("#main").append('<section id="nextractor" class="five"> </section>');  
});

$("#nextractorapply").on('click', function () { 
    // executes every time

    // do other stuff
});

Upvotes: 38

Related Questions