按钮单击 JQuery 不起作用

Question

我在 JQuery 中单击按钮时遇到问题。我必须通过 AJAX post 输入字段的值，但是单击它自己的按钮甚至不起作用。

当我登录到控制台时，它没有注册按钮点击。

你们能帮帮我吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>AJAX calls to Servlet using JavaScript and JSON</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <h1>Tasks to do</h1>
    <form method="post">
        <input type="text" placeholder="give task's name" name="name" id="name" /> 
        <input type="text" placeholder="give task's summary" name="summary" id="summary" /> 
        <input type="button" id="submit" value="Submit" class="submit"/>
    </form>
    <br/>

    <h1>Here are the open tasks 2</h1>
    <div id="open"></div>
    <script>
    $(document).ready(function() {  
        $(".submit").click(function(){
          $("#open").html = "Button clicked";
        }); 
    });
</script>
</body>
</html>

Answer 1

您的语法不正确，请将 .html = 更改为 .html(htmlCode)。阅读 jQuery 中 html() 方法的文档，以便更好地理解

$(document).ready(function() {
  $(".submit").click(function() {
    $("#open").html("Button clicked");
    //        -----^-----
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Tasks to do</h1>
<form method="post">
  <input type="text" placeholder="give task's name" name="name" id="name" />
  <input type="text" placeholder="give task's summary" name="summary" id="summary" />
  <input type="button" id="submit" value="Submit" class="submit" />
</form>
<br/>

<h1>Here are the open tasks 2</h1>
<div id="open"></div>

或者你可以使用innerHTML

$(document).ready(function() {
  $(".submit").click(function() {
    $("#open")[0].innerHTML = "Button clicked";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Tasks to do</h1>
<form method="post">
  <input type="text" placeholder="give task's name" name="name" id="name" />
  <input type="text" placeholder="give task's summary" name="summary" id="summary" />
  <input type="button" id="submit" value="Submit" class="submit" />
</form>
<br/>

<h1>Here are the open tasks 2</h1>
<div id="open"></div>

Answer 2

试试这个，它会对你有所帮助。先注册控件。

在文档就绪函数之外使用此脚本

$(document).on('click','.submit',function(){
    $("#open").html("Button clicked");
});

或

$(document.body).on('click','.submit',function(){
    $("#open").html("Button clicked");
});

Answer 3

换行

$("#open").html = "Button clicked";

至

$("#open").html("Button clicked");

Answer 4

$(document).ready(function() {  
  $(".submit").click(function(){
    $("#open").html("Button clicked");
  }); 
});

并且您可以使用 console.log() 来检查函数是否有效。你可以看到 Open Developer Tools.

$(document).ready(function() {  
  $(".submit").click(function(){
    console.log("Button clicked");
  }); 
});

https://jsfiddle.net/hxp4472h/3/

Answer 5

尝试：

  $("#submit").click(function(){
          $("#open").html = "Button clicked";
        });

Answer 6

您的代码中的按钮点击没有任何问题。它会完美运行，您可以使用警报方法而不是更新 div.
您尝试更新 div 的方式有误。这是正确的做法：$("#open").html('Button clicked')。注意：html() 不是属性.

按钮单击 JQuery 不起作用

Button Click JQuery does not work

jquery

click

button