我在标签后面隐藏了一个复选框。当我单击标签时，代码会更新复选框中的值。这在Windows中运行良好，但iOS7没有点击复选框，而是打开Facebook和Twitter等随机社交网站。
http://jsfiddle.net/skhatoon/2Cmfe/
$(function () {
var Note = function (noteText) {
this.text = ko.observable(noteText);
this.dateTime = new Date();
}
var Challenge = function (challengeText, challengeCompleted) {
this.text = ko.observable(challengeText);
this.completed = ko.observable(challengeCompleted);
}
var isTouch = false;
try { isTouch = "ontouchstart" in window; } catch (e) { }
var $activeTip = null;
jQuery.fn.customInput = function () {
$(this).each(function (i) {
if ($(this).is('[type=checkbox],[type=radio]')) {
var input = $(this);
if (input.data('customInput') === 'done') {
return true;
}
else {
input.data('customInput', 'done');
}
// get the associated label using the input's id
var label = $('label[for=' + input.attr('id') + ']');
//get type, for classname suffix
var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
// wrap the input + label in a div
$('<div class="custom-' + inputType + '"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
var allInputs = $('input[name=' + input.attr('name') + ']');
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function () {
$(this).addClass('hover');
if (inputType == 'checkbox' && input.is(':checked')) {
$(this).addClass('checkedHover');
}
},
function () { $(this).removeClass('hover checkedHover'); }
);
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function () {
if (input.is(':checked')) {
if (input.is(':radio')) {
allInputs.each(function () {
$('label[for=' + $(this).attr('id') + ']').removeClass('checked');
});
};
label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }
})
.trigger('updateState')
.click(function () {
if (input.is(':checked')) {
if (input.is(':radio')) {
allInputs.each(function () {
$('label[for=' + $(this).attr('id') + ']').removeClass('checked');
});
};
label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }
})
.focus(function () {
label.addClass('focus');
if (inputType == 'checkbox' && input.is(':checked')) {
$(this).addClass('checkedFocus');
}
})
.blur(function () { label.removeClass('focus checkedFocus'); });
}
});
};
$.fn.smartHover = function (configObject) {
if (isTouch) {
$(this)
.bind("hold", function () {
$activeTip = $(this);
$(this).data("held", true);
})
.bind("hold", configObject.over)
.bind("click", function (e) {
var wasHeld = $(this).data("held");
$(this).data("held", false);
if (wasHeld) {
e.preventDefault();
return false;
}
})
.data("close", configObject.out);
} else {
$(this).hoverIntent(configObject);
}
};
if (isTouch) {
document.ontouchstart = function () {
if ($activeTip) {
$activeTip.data("close").call($activeTip);
$activeTip = null;
}
};
}
function courseViewModel(notes, challenges) {
var self = this;
self.termsOfUseAccepted = ko.observable(false);
self.continueDisplay = ko.computed({
read: function() {
return self.termsOfUseAccepted();
//return self.termsOfUseAccepted();
},
owner: this,
deferEvaluation: true
});
self.studentsName = ko.observable('Garry Smith');
self.studentsAge = ko.observable(25);
self.notes = ko.observableArray(notes);
self.challenges = ko.observableArray(
ko.utils.arrayMap(challenges, function (challenge) {
return new Challenge(challenge.challengeText, challenge.completed);
}));
self.challengeCompletedCount = ko.computed(function () {
return ((ko.utils.arrayFilter(self.challenges(),
function (challenge) {
return challenge.completed();
}).length / self.challenges().length) * 100).toFixed(0) + ' %';
});
self.noteToAdd = ko.observable();
self.addNote = function () {
var note = self.noteToAdd();
if (note) {
self.notes.push(new Note(note));
self.noteToAdd("");
function showtip() {
if ($(this).hasClass("checkbox")) {
$(this).addClass('show-tip');
}
}
function hidetip() {
if ($(this).hasClass("checkbox")) {
$(this).removeClass('show-tip');
}
}
var config = {
sensitivity: 4,
interval: 250,
over: showtip,
out: hidetip
};
$(".checkbox").smartHover(config);
self.validation("success", true, "Wicked good job!");
}
else {
self.validation("fail", true, "Oh shux! There was no note text.");
}
};
self.validationStatus = ko.observable();
self.displayValidation = ko.observable();
self.validationText = ko.observable();
self.validation = function (status, displayValidation, text) {
self.validationStatus(status);
self.displayValidation(displayValidation);
self.validationText(text);
};
};
var notes = [{
text: 'test1'
}, {
text: 'test2'
}];
var challenges = [{
"challengeText": "Chapter 1 Challenge",
"completed": false
}, {
"challengeText": "Chapter 2 Challenge",
"completed": false
}, {
"challengeText": "Chapter 3 Challenge",
"completed": false
}, {
"challengeText": "Chapter 4 Challenge",
"completed": false
}, {
"challengeText": "Chapter 5 Challenge",
"completed": false
}, {
"challengeText": "Chapter 6 Challenge",
"completed": false
}];
var viewModel = new courseViewModel(notes, challenges);
ko.applyBindings(viewModel);
$('input').customInput();
});
(function($) {
$.fn.hoverIntent = function(f, g) {
var cfg = {sensitivity: 7,interval: 100,timeout: 0};
cfg = $.extend(cfg, g ? {over: f,out: g} : f);
var cX, cY, pX, pY;
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY
};
var compare = function(ev, ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
$(ob).unbind("mousemove", track);
ob.hoverIntent_s = 1;
return cfg.over.apply(ob, [ev])
} else {
pX = cX;
pY = cY;
ob.hoverIntent_t = setTimeout(function() {
compare(ev, ob)
}, cfg.interval)
}
};
var delay = function(ev, ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob, [ev])
};
var handleHover = function(e) {
var ev = jQuery.extend({}, e);
var ob = this;
if (ob.hoverIntent_t) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t)
}
if (e.type == "mouseenter") {
pX = ev.pageX;
pY = ev.pageY;
$(ob).bind("mousemove", track);
if (ob.hoverIntent_s != 1) {
ob.hoverIntent_t = setTimeout(function() {
compare(ev, ob)
}, cfg.interval)
}
} else {
$(ob).unbind("mousemove", track);
if (ob.hoverIntent_s == 1) {
ob.hoverIntent_t = setTimeout(function() {
delay(ev, ob)
}, cfg.timeout)
}
}
};
return this.bind('mouseenter', handleHover).bind('mouseleave', handleHover)
}
})(jQuery);
以下是我的HTML
<!--pre data-bind="text: ko.toJSON($root, null, 2)"></pre-->
<input type="checkbox" id="terms" data-bind="checked: termsOfUseAccepted" >
<label for="terms" class="" >I understand </label>
<div class="chk-overview ">
<a href="javascript:;" data-bind="visible: continueDisplay">
<h2 >Continue</h2>
</a>
</div>
<div class="form-group">
<label>Students Name: <span class="text-primary" data-bind="text: studentsName"></span>
</label>
<input class="form-control" data-bind="value: studentsName,
valueUpdate: 'afterkeydown'" />
<label>Student's Age: <span class="text-primary" data-bind="text: studentsAge"></span>
</label>
<input class="form-control" data-bind="value: studentsAge, valueUpdate:
'afterkeydown'" />
</div>
<hr />
<h5 data-bind="visible: challenges().length > 0">Challenges:</h5>
<div data-bind="template: { name: 'challenges-template', foreach: challenges }"></div>
<script type="text/html" id="challenges-template">
<div class="checkbox"><label><input type="checkbox"
data-bind="checked: completed"><div data-bind="text: text"></div>
</label></div>
</script>
<h5>Completed: <span data-bind="text: challengeCompletedCount"></span></h5>
<hr />
<div class="alert" data-bind="text: validationText,
css: {
'alert-success': validationStatus() === 'success',
'alert-danger': !(validationStatus() === 'success')
},
visible: displayValidation">
</div>
<form data-bind="submit: addNote">
<div class="form-group">
<label>Add Note:</label>
<textarea data-bind="value: noteToAdd" class="form-control"></textarea>
<br />
<button class="btn btn-primary" type="submit">Add</button>
</div>
</form>
<h5 >Notes:</h5>
<div data-bind="template: { name: 'notes-template', foreach: notes }"></div>
<script type="text/html" id="notes-template">
<div class="well well-small"> <h5 data-bind = "text: new Date()"> </h5>
<div data-bind="text: text"></div > </div>
</script>