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>');
});
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
});
$("#nextractor").remove() in the same event handler which works somehow but assuming I have multiple appends to do, the number of lines of code would increase. Your method is much more simpler and effective :)Use a conditional to determine if it's there.
$("#nextractorapply").click(function () {
if($('#nextractor').length < 0){
$("#main").append('<section id="nextractor" class="five"> </section>');
}
});
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
});
You could use .unbind()
$("#nextractorapply").unbind().click(function () {
$("#main").append('<section id="nextractor" class="five"> </section>');
});
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');
}
})
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.
$("#nextractorapply").click(function () {
$("#main").empty().append('<section id="nextractor" class="five"> </section>');
});
