点击后选中标记无响应

Question

我有以下链接，当你点击它时，它会改变我的复选标记颜色。如下

.checkmark {
    display: inline-block;
    width: 22px;
    /* height: 22px; */
    height: 17px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 50%;
    margin-bottom: 1px;
}

    .checkmark:before {
        content: '';
        position: absolute;
        width: 3px;
        height: 9px;
        background-color: #ccc;
        left: 11px;
        top: 6px;
    }

.checkmark {
    cursor: pointer;
}

    .checkmark:after {
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #ccc;
        left: 8px;
        top: 12px;
    }

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
    background-color: blue;
}

<label  dataid="' + this.MarketID + '"><input type= "checkbox" style= "display:none;" id="cb' + this.MarketID + '" >Click Me<span for="cb' + this.MarketID + '" class="checkmark"></span ></label >

我遇到的问题是，当我向我的标签添加一个onclick函数时，复选标记会停止共振，如下所示：

function followInternalink(event) {
            var link = $(event.target).closest('label');
            
            var destination = link.attr('data-destination');
            if ((destination == 'null' || destination == 'local') && link.attr('dataid')) {
                event.preventDefault();
                var id = link.attr('dataid');
                navigateToEvent(id);
            }
            else {
            //does something else
            }
            }

.checkmark {
    display: inline-block;
    width: 22px;
    /* height: 22px; */
    height: 17px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 50%;
    margin-bottom: 1px;
}

    .checkmark:before {
        content: '';
        position: absolute;
        width: 3px;
        height: 9px;
        background-color: #ccc;
        left: 11px;
        top: 6px;
    }

.checkmark {
    cursor: pointer;
}

    .checkmark:after {
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #ccc;
        left: 8px;
        top: 12px;
    }

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label onclick="followInternalink(event)" data-destination="local" dataid="' + this.MarketID + '" ><input type= "checkbox" style= "display:none;" id="cb' + this.MarketID + '" >Click Me<span for="cb' + this.MarketID + '" class="checkmark"></span ></label >

以上功能正如我所希望的那样，它只是停止检查复选标记，我做错了什么？

Answer 1

您正在设置event.preventDefault();，这可能是您原生HTML行为停止工作的原因