Question

I have this code for displaying content for login and registration in my PHP file:

<?php // LOGIN PART ?>
<div class="login-part"></div>

<?php // REGISTRATION PART ?>
<div class="registration-part"></div>

And this in my js file:

$(document).ready( function() {
            // FOR REGISTRATION
            $('span.logreg.reg').click(function () {

                $('div.registration-part').append('<p>Registration</p>');
            });

            // FOR LOGIN
            $('span.logreg.log').click(function () {

                // insert html
                $('div.login-part').append('<p>Login</p>');
            });
        });

Now, everytime I click on a span it shows the text login or registration, according to which of the span was clicked.

Thats OK, however I need to add it only once, so when the user click more times on the span it will be not adding more text.

Remove() or empty() is not an option, as far as I know, because I need the information inside input boxes (there will be input boxes later for inserting user info) to stay there and not be deleted if the user click accidentally on the span again.

It can however delete the html inside the div, if he clicks on another span. E.g. if span.log is active, after clicking on span.log nothing happens, but if he clicks on span.reg the html inside div.login-part will be removed and registration text will appear.

How to do something like this?

Answer 1

Try APi: .one please : (Reading your question it seems you only need to append the HTML like login once using .one will resolve this issue)

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

APi link: http://api.jquery.com/one/

This way append will only one time as desired and you will not have duplicate html showing multiple times.

Hope this helps, please lemme know if I missed anything,

further bit diff demo: http://jsfiddle.net/avSDa/9/ using .is(:empty) which ever suits you.

code like this

  $('span.logreg.log').one('click', function () {

                // insert html
                $('div.registration-part').append('<p>Login</p>');
            });