jQuery单击代码未在第一次单击时运行

Question

我对我的问题类似的许多发现感到惊讶>

我遇到的问题是，我的单击事件代码在第一次单击时没有执行。我可以在Console.log（）中看到或警告事件正在触发，但是，代码（警报/日志除外）未执行。我没有看到控制台中的任何错误。

在此示例中有3个LI按钮，所有3个按钮的行为都相同 - 他们都忽略了第一个单击仅显示警报/日志的第一个单击。

这是我代码的相关部分：

$(document).ready(function(){
    $(".search-multi-property-type").click(function() {
        $(this).toggleClass("active");
        var prependText = "<span class='glyphicon glyphicon-ok'></span> ";
        var value = $(this).data("id");
        if(!$(this).hasClass("active")){
            //tasks to the button
            $(this).css("background-color", "#5cb85c");
            $(this).css("color", "white");
            $(this).prepend(prependText);
            //tasks to the input
            $("#lease-type-input").val(function(i,val) {
                 return val + (!val ? '' : ', ') + value;
            });
            alert($("#lease-type-input").val());
        }
        //if it is active, make it inactive
        if($(this).hasClass("active")){
            //tasks to the button
            $(this).css("background-color", "#eeeeee");
            $(this).css("color", "black");
            $(this).find(".glyphicon").remove();
            //tasks to the input
            $("#lease-type-input").val($("#lease-type-input").val().replace(value + ", ", ""));
            $("#lease-type-input").val($("#lease-type-input").val().replace(", " + value, ""));
            $("#lease-type-input").val($("#lease-type-input").val().replace(value, ""));
            alert($("#lease-type-input").val());
        }
    });
});
<li class="dropdown-label">Property Type<span class="glyphicon glyphicon-wrench"></span></li>
                        <ul class="search-multi-row">
                        <input id="lease-type-input" name="lease_type" type="hidden">
                            <li data-id="APT" class="search-multi search-multi-property-type">Apartment</li>
                            <li data-id="SUB" class="search-multi search-multi-property-type">Sublease</li>
                            <li data-id="HOU" class="search-multi search-multi-property-type">House</li>
                        </ul>

      </li>

Answer 1

问题是$(this).toggleClass("active");

您应该将其放置在功能的底部

请在

上检查工作示例

http://jsfiddle.net/am6sm/