Question

I am adding the form my current list in a div box at the bottom of the table.
I am appending the div box when someone clicks on add button.

But when i click add button multiple times , then many div boxes are appended.

Is there any way that no matter how many times I click the button, only one instance gets append to div box.

This is my code

$var = $(this).parent().parent();
$var.append($('.jq_div')[0].outerHTML);

Answer 1

One simple solution would be having a boolean flag that you can toggle once your button is clicked. Additionally, there is actually a jQuery function that provides this exact functionality.

It’s called one() –

Attach a handler to an event for the elements. The handler is executed
at most once per element.

So your code would look something like this –

$("#someTrigger").one('click', function(){
  $var = $(this).parent().parent();
  $var.append($('.jq_div')[0].outerHTML);
});

The boolean method is also very simple –

var wasClicked = false;

$("#someTrigger").on('click', function(){
  if (wasClicked == false){
    // append your form
    wasClicked = true;
  }
});

Reference –

• one()