Jquery冻结秀（）

Question

有人可以告诉我，如果我疯了，或者我哪里出错了。我在多个浏览器上尝试了这个，当你执行show（）时它会冻结jQuery。

我无法弄清楚，我已经尝试了多种方法来扭转代码，无论如何，当调用.show（）时，它会冻结，直到页面重新加载才会生效。

目的是展示一些不同的选项，如果用户点击并且它是付费选项，则会显示所需的其他信息。疯狂的事情就是当你删除大部分的li时，它运行正常。但是当你在页面中添加li时它不起作用。它适用于2或3次点击，然后冻结。 Firebug没有显示错误，只是没有做任何事情。有趣的是，当选项部分被冻结时，页面其余部分的jquery仍然有效。我会感谢任何建设性的想法。谢谢！

不能正常工作joopk.com/signup 作品//////////////////////////////////////////////

$(document).ready(function () {
   $("#signupoptions .signupoption").click(clickedoption);
});
function clickedoption() {
  if ($(this).hasClass("payoption")) {
    $("#signupadditionalinfo").show();
  }else {
    $("#signupadditionalinfo").hide();
  }
   $("#signupoptions .signupoption").removeClass("optionselected");
   $(this).addClass("optionselected");
}

我为了简洁起见了详细信息，但一般的html如下：

 <div id="signupoptions">
                            <div id="signupoptiondescription">
                                <ul>
                                    <li>Joopk.com CMS</li>
                                </ul>
                            </div>
                            <div id="signupoptionsocial" class="signupoption optionselected">
                                <h3>
                                    Social</h3>
                                <ul>
                                    <li class="check"></li>
                                </ul>
                            </div>
                            <div id="signupoptionbusiness" class="signupoption payoption">
                                <h3>
                                    Business</h3>
                                <ul>
                                    <li class="check"></li>
                                </ul>
                            </div>
                            <div id="signupoptiondeveloper" class="signupoption payoption">
                                <h3>
                                    Developer</h3>
                                <ul>
                                    <li class="check"></li>
                                </ul>
                            </div>
                            <div class="clear">
                            </div>
                        </div>
                        <div id="signupadditionalinfo" class="container" style="display: none;">
                            <h3>
                                Additional Information</h3>

                        </div>

Answer 1

点击逻辑已关闭...请查看我的小提琴：http://jsfiddle.net/sablefoste/3JMA9/1/

基本上，看一下jQuery：

$(document).ready(function () {
    $("#signupoptions .signupoption").click(function(){
        clickedoption($(this).attr('class'));
    });
});

function clickedoption(myclass) {
    if (myclass.indexOf("payoption") !== -1) {
        $("#signupadditionalinfo").show();
    } else {
        $("#signupadditionalinfo").hide();
    }
    $("#signupoptions .signupoption").removeClass("optionselected");
    $(this).addClass("optionselected");
}

CSS可以帮助您了解正在发生的事情。