带有 HTML 的 jQuery 微调器不起作用答案

【问题标题】：jQuery spinner with HTML not working带有 HTML 的 jQuery 微调器不起作用
【发布时间】：2014-05-01 19:45:49
【问题描述】：

我正在尝试在我的 HTML 中使用 jQuery 微调器。此代码在 JSFiddle http://jsfiddle.net/Uygt2/80/ 中运行良好，但不适用于从任何浏览器运行的以下 html。它只显示常规文本框。我一直在摸不着头脑，但无法弄清楚下面的代码有什么问题：

<html>
<head>
<title>website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/fontPicker.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
  $( document ).ready(function() {
    $("input").spinner({
        max: 3,
        min: 0
    }).on('input', function () {
    var val = this.value,
     $this = $(this),
     max = $this.spinner('option', 'max'),
     min = $this.spinner('option', 'min');
     if (!val.match(/^\d+$/)) val = 0; //we want only number, no alpha
 this.value = val > max ? max : val < min ? min : val;
 });
});
</script>
</head>
<body>
<div id="layout">
    <!-- Wrappers for website modified using css file -->

    <!-- Header -->
    <div id="header-wrapper">Header</div>

    <!-- Center Column -->
    <div id="column-center">
        <!-- Code display -->
        <div id="code-area">
            <pre>code is displayed here</pre>
        </div>

        <!-- Preview -->
        <div id="preview-area">
        </div>

    </div>

    <!-- Left Column -->
    <div id="column-left">
        <div id="settings">
            Number of Boxes: <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        <br><br>
        For each box: <br><br>
        Height: <input type="text" value="0"> px
        <input id="spinner" name="value">
        <span style="display:inline-block; width: 12px;"></span>
        Width: <input type="text"> px<br>
    </div>

</div>

<!-- Right Column -->
<div id="column-right">Column right</div>
<!-- Footer -->
<div id="footer-wrapper">Footer</div>

【问题讨论】：

您是从服务器运行它还是只是在浏览器中本地打开它？
在keydown而不是输入时使用......
@j08691 我只是在浏览器中本地运行它。
@C-link，keydown 没有任何区别。
@j08691 如果我从服务器运行，它工作正常。但它只是在本地不起作用。怎么回事？

标签： jquery html spinner

【解决方案1】：

在本地运行时，不能使用如下链接：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

//ajax.googleapis.com/ 部分将转换为 file://ajax.googleapis.com/ 并失败。

在本地测试时，您需要输入完整的 URL，例如：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

【讨论】：