Tell jQuery to execute certain code only once.

Question

Is there any way to tell jQuery to do something only once? E.g. right now, I need jQuery to on click of div, append some HTML. Then, every time someone clicks that div again it toggles hide/show. Is there a way to do this? I'm trying not to be too confusing.

EDIT: Solved!

Answer 1

Use the one method.

For example:

$('#myDiv').one('click', function() {
    $(this).append('...').click(function() { ... });
});

Answer 2

jQuery's toggle: http://docs.jquery.com/Effects/toggle

Answer 3

You're looking for the one method. Alternatively you could use hide or show instead of toggle.

Answer 4

There are multiple ways of doing this.

Firstly you could use a marker and then remove it:

<div id="mydiv" class="not-initialized">
  ...
</div>

with:

$("#mydiv").click(function() {
  if ($(this).hasClass("not-initialized")) {
    $(this).removeClass("not-initialized");
    // append content
  } else {
    $(this).toggle();
  }
});

Secondly, you could change event handlers:

$("#mydiv").click(append_content);

function append_content() {
  ...
  $("#mydiv").unbind("click", append_content).click(toggle_display);
}

function toggle_display() {
  $(this).toggle();
}

Or you could do things like testing the div to see if the content is there.