If condition with curly brackets is not working correctly in jQuery

Question

This works:

if($('div.login-part').is(':empty'))
        $('div.login-part').append('<p>Login</p>');

But this is not:

if($('div.login-part').is(':empty')) 
{
        $('div.login-part').append('<p>Login</p>');
            $('div.login-part').append('<p>Welcome!</p>');
            $('div.login-part').append('<p>What is your name?</p>');
}

What am I doing wrong?

Answer 1

That should work fine. You can, however, make your code more efficient by not running the selector multiple times:

var login = $('div.login-part')
if(login.is(':empty')) {
    login.append('<p>Login</p>');
    login.append('<p>Welcome!</p>');
    login.append('<p>What is your name?</p>');
}

You can even reduce that to:

$('div.login-part:empty')
    .append('<p>Login</p>')
    .append('<p>Welcome!</p>')
    .append('<p>What is your name?</p>');

Or even:

$('div.login-part:empty').append(
    '<p>Login</p>',
    '<p>Welcome!</p>',
    '<p>What is your name?</p>'
);

Answer 2

working demo http://jsfiddle.net/avSDa/10/

Please check closing quotes in your code; Since I know the background of this question from previous early reply :)

Demo should help you,

Hope this helps, cheers

code

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

    if ($('div.login-part').is(':empty')) {
        $('div.login-part').append('<p>Login</p>');
        $('div.login-part').append('<p>Welcome!</p>');
        $('div.login-part').append('<p>What is your name?</p>');
    }
});