Question

我很惊喜地发现许多类似于我自己的问题，但在大约15个问题之后，我找不到有同样问题的人。

我遇到的问题是我的点击事件代码没有在第一次点击时执行。我可以在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/

JQuery点击代码没有在第一次点击运行？

1 个答案: