Question

我在JQuery中单击按钮时遇到了麻烦。我必须通过AJAX发布输入字段的值，但点击它自己的按钮甚至不起作用。

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

你们可以帮帮我吗？

<!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");
});

OR

$(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（'Click clicked'）。注意：html（）是一种不属性的方法。

按钮单击JQuery不起作用

6 个答案: