点击后选中标记无响应

时间:2018-02-28 10:40:59

标签: javascript jquery html css

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

.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 >

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

1 个答案:

答案 0 :(得分:0)

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