单击时选中标记没有响应

Question

i have the following link that when you click on it,it changes my checkmark colour. as follows

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

the problem i am having is that when i add an onclick function to my label the checkmark stops resonding as follows:

 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 > 

the above function works as i want it to,it just stops checking the checkmark, what am i doing wrong?

Answer 1

You are setting event.preventDefault(); which may be the reason you native HTML behaviour stopped working