Question

我遇到了一个无法解决问题的问题！我只是想表现出来测试＆＃39;在我的控制台中查看我的选择器是否有效。我评论了它周围的一切，整个脚本，除了选择器，但它仍然无法工作。我是jQuery的新手所以也许我实施了错误的东西？这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">

    $('#find').on("click", function(){
        console.log("test");
    });

</script>
</head>
<body>
    <p>Postleitszahl:</p>
    <input type="number" autocomplete="on" name="inp" class="inp">
    <button type="button" id="find">Finden</button>
    <p class="outp"></p>
</body>
</html>

Answer 1

您可以将包含该功能的script块移至body的底部：

<!-- other code -->

<script type="text/javascript">
    $('#find').on("click", function(){
        console.log("test");
    });
</script>

或者您可以在$(document).ready()中使用head，如下所示：

<!-- other code -->

<script type="text/javascript">

    $(document).ready( function() {
      $('#find').on("click", function(){
          console.log("test");
      });
    })

</script>

原因是javascript在将元素加载到DOM之前无法识别这些元素。

您可以在here中找到有关加载脚本的详细信息。

Answer 2

请尝试以下代码。它现在应该工作。

$('#find').click(function() {
  alert('button clicked!');
  console.log('test');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Postleitszahl:</p>
    <input type="number" autocomplete="on" name="inp" class="inp">
    <button type="button" id="find">Finden</button>
    <p class="outp"></p>

Answer 3

你可以使用它的代码！

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $('#find').on("click", function(){
       alert("test");
       console.log("test");
    });
});
</script>
</head>
<body>

<p>Postleitszahl:</p>
    <input type="number" autocomplete="on" name="inp" class="inp">
    <button type="button" id="find">Finden</button>
    <p class="outp"></p>

</body>
</html>

jQuery不会单击按钮

3 个答案: