Question

我尝试隐藏提交按钮，但它无法正常工作。我写了几个警告进行测试，结果发现它从未进入点击事件。谁能告诉我我的错误在哪里？非常感谢！

<!DOCTYPE html>

<head>
  <title>Dindin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
  <div class="play">

    <p>What's your name?</p>
    <br><input type="text" name="name">
    <p>What time are you going to dinner?</p>
    <br><input type="time" name="time">
    <br><input type='submit' value='Submit'>

  </div>

  <script>
  alert("Hello");
    $('input:submit').click(function() {
        alert("Into click");
        storeInfo();
        showResult();
        $('.play').html("<input type='submit'value='Booked!'");
    }
    var answers= [];
    var storeInfo = function() {
        alert("Into storeInfo");
        $('input:submit').hide();
        answers.push([$('input:text').val(), $('input:time').val()]);
        var time = $('#time');
    }
    var showResult = function() {
        alert("Into showResult");
        $('.play').html('These are the people going to dinner near your time:');
        for (var i = 0; i < answers.length; i++) {
            if (Math.abs(answers[i][1] - time)/1000 =< 10000) {
                $('.play').html('<br>'+answers[i][0]+' '+answers[i][1]);
            }
        }
    }


  </script>
</body>

Answer 1

你错过了一个右括号和分号，这导致你的JS出错。

$('input:submit').click(function() {
        alert("Into click");
        storeInfo();
        showResult();
        $('.play').html("<input type='submit'value='Booked!'");
    }); // <<<< here

您的代码中还有其他错误需要修复。查看F12控制台日志。例如，这是不正确的：

 if (Math.abs(answers[i][1] - time)/1000 =< 10000) {

=<应为<=。

此外，您应该使用$(document).ready()以确保在加载DOM后绑定事件。

Answer 2

您应该将jQuery代码放在

中

$(function() {
    // place your code here
});

否则它可能不起作用，因为jQuery没有“准备好”。

通过单击事件Javascript隐藏输入类型

2 个答案: