javascript - 如何使一个元素只能点击一次，而其他元素在执行操作时仍然可点击？

Question

这是一个动态创建的过滤器列表。单击“帐户”链接将打开一个模式窗口，其中包含帐户名称列表。单击帐户名称会导致 li 元素出现在过滤器侧栏中。问题是您此时可以多次单击链接并创建一个元素，即使它是相同的信息。我需要它做的是每个帐户列表仅创建一次 li。我考虑过使用 not () 选择器并在单击帐户名称时在操作末尾添加一个类。问题是它们都共享相同的 .account 类，这就是 JQuery 在单击时执行操作的方式。我的问题首先是如何让它工作，因为我的 not () 行没有触发。其次，如何让它仅针对用户单击的一项，而不是针对帐户类别的所有链接？这是 JSFiddle，但由于某种原因它不想完全工作，因为该站点有很多来自 Bootstrap 的代码:http://jsfiddle.net/rsxavior/puhdE/7/

这是我引用的相关代码:

<li>
    <a href="#accountModal" data-toggle="modal">Accounts</a>
    <!--Start Account Sort Modal-->
    <div class="modal hide" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="accountLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <hgroup>
                <h4 id="accountLabel">Accounts</h4>
                <h6>(Choose an account's first letter to quickly sort)</h6>
            </hgroup>
            <ul class="nav nav-pills">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
                <li><a href="#">E</a></li>
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
                <li><a href="#">I</a></li>
                <li><a href="#">J</a></li>
                <li><a href="#">K</a></li>
                <li><a href="#">L</a></li>
                <li><a href="#">M</a></li>
                <li><a href="#">N</a></li>
                <li><a href="#">O</a></li>
                <li><a href="#">P</a></li>
                <li><a href="#">Q</a></li>
                <li><a href="#">R</a></li>
                <li><a href="#">S</a></li>
                <li><a href="#">T</a></li>
                <li><a href="#">U</a></li>
                <li><a href="#">V</a></li>
                <li><a href="#">W</a></li>
                <li><a href="#">X</a></li>
                <li><a href="#">Y</a></li>
                <li><a href="#">Z</a></li>
            </ul>
        </div>
        <div class="modal-body">
            <ul>
                <li class="account"><a href="#">All</a></li>
                <li class="account"><a href="#">A Name</a></li>
                <li class="account"><a href="#">Another Account Name</a></li>
                <li class="account"><a href="#">Babcock Center</a></li>
            </ul> 
        </div>
        <div class="modal-footer">
            <ul class="pager">
                <li><a href="#">Prev</a></li>
                <li><a href="#">Next</a></li>
            </ul>
        </div>
    </div>
    <ul class="account-hidden-li"></ul>
</li>

以及随之而来的 JQuery:

$('.account:not('.selected-account')').click(function () {
    $('.account-hidden-li').append('<li class="account-select">Sample Account Name<a class="close" data-dismiss="alert" href="#">&times;</a></li>');
    $('.account').addClass('selected_account');
)};

任何有关此事的帮助将不胜感激!

Answer 1

$(".account").click(function () {
this.unbind("click");
    $('.account-hidden-li').append('<li class="account-select">Sample Account Name<a class="close" data-dismiss="alert" href="#">&times;</a></li>');
    $('.account').addClass('selected_account');

} );