ios7链接在点击时调用错误的URL

时间:2013-10-14 15:56:05

标签: javascript knockout.js ios7

我在标签后面隐藏了一个复选框。当我单击标签时,代码会更新复选框中的值。这在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>

0 个答案:

没有答案