Question

这个jquery代码没有按预期工作的原因是什么？

<html>
<head>
<link rel="stylesheet"  href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" >
<script src="<c:url value="/jquery-1.11.3.js" />"></script>

<script type="text/javascript">
function selectRat(){
    alert('ajax 1'); //displays OK
    alert('ajax 2: ' +  document.getElementById('test').value );  //displays OK

    alert( $('#test').val() ); //does NOT display

    alert('end of function'); //never reached as previous line fails
    }



</script>

</head>

<body>


    <select  class="offset2 span4 form-control"  name="test"" id = "test" onchange="selectRat()">
<option>1</option>
<option>2</option>
    </select>


</body>
</html>

我想了解原因：

alert('ajax 2: ' +  document.getElementById('test').value );

显示很好，但

alert( $('#test').val() );

不显示？

我很确定原因很明显，但我无法弄清楚。

Answer 1

首先，通过检查控制台日志以确定是否有任何资源无法加载，确保jQuery库已正确加载。

其次，您的HTML选择存在问题，并且有一个额外的"可能会导致一些问题。

为了证明一切正常，我已经清理了你的示例，而不是提醒输出，因为它被阻止了代码片段查看器，并且控制台将其记录下来。

＆＃13;

function selectRat() {
  console.log('ajax 1'); //displays OK
  console.log('ajax 2: ' + document.getElementById('test').value); //displays OK

  console.log($('#test').val()); //does NOT display

  console.log('end of function'); //never reached as previous line fails
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="offset2 span4 form-control" name="test" id="test" onchange="selectRat()">
  <option>1</option>
  <option>2</option>
</select>

＆＃13;

jquery元素未解析

1 个答案: