仅当 jQuery 中的 div 为空时，如何附加 html？

Question

我有这段代码用于在我的 PHP 文件中显示登录和注册内容：

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

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

这在我的 js 文件中：

$(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>');
            });
        });

现在，每次我单击一个跨度时，它都会根据单击的跨度显示文本登录或注册。

没关系，但是我只需要添加一次，所以当用户在跨度上单击更多次时，它不会添加更多文本。

据我所知，Remove() 或 empty() 不是一个选项，因为我需要输入框中的信息（稍后将有输入框用于插入用户信息）留在那里，如果用户再次意外点击 span。

但是，如果他单击另一个跨度，它可以删除 div 内的 html。例如。如果 span.log 处于活动状态，则单击 span.log 后没有任何反应，但如果他单击 span.reg，则会删除 div.login-part 中的 html 并显示注册文本。

如何做这样的事情？

Answer 1

请尝试 APi：.one：（阅读您的问题，您似乎只需要使用.one 附加 HTML 之类的 login 即可解决此问题）

将处理程序附加到元素的事件。处理程序被执行 每个元素最多一次。

API 链接：http://api.jquery.com/one/

这种方式只会根据需要追加一次，并且不会有重复的 html 显示多次。

希望这有帮助，如果我错过了什么，请告诉我，

进一步位差异演示：http://jsfiddle.net/avSDa/9/ 使用 .is(:empty) 适合您。

代码像这样

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

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