jQuery 회 전자가 작동하지 않습니다.

제 HTML에서 jQuery 회 전자를 사용하려고합니다. 이 코드는 JSFiddle http://jsfiddle.net/Uygt2/80/에서 제대로 작동하지만 모든 브라우저에서 실행되는 다음 HTML에서는 작동하지 않습니다. 일반 텍스트 상자 만 보여줍니다. 나는 잠시 동안 내 머리를 긁적되었지만 아래의 코드에 어떤 문제가 있는지 알아낼 수 :jQuery 회 전자가 작동하지 않습니다.

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

출처

2014-05-01 Gantavya

당신이 서버에서이를 실행하거나 브라우저에서 로컬로 열기? – j08691

입력시 대신 keydown을 사용하십시오 ... –

@ j08691 브라우저에서 로컬로 실행하고 있습니다. – Gantavya

로컬로 실행하면 같은 링크를 사용할 수 없습니다 :

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

출처

2014-05-01 11:45:49 j08691

jQuery 회 전자가 작동하지 않습니다.

답변

관련 문제