jquery - 按钮点击JQuery不起作用

标签 jquery button click

我在 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>

最佳答案

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

$(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>

关于jquery - 按钮点击JQuery不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30637586/

相关文章:

javascript - 用于月份和年份选择的 jQuery UI DatePicker 不起作用

excel - 将工作表、代码和按钮复制到新文件

java - 按钮可能产生空指针异常(Android Studio)

actionscript-3 - 所有 child 均已禁用,只有一只鼠标处于事件状态

c# - 如何使 JQuery 屏蔽输入插件在 asp.net Ajax 更新面板中的 AsyncPostback 之后工作?

javascript - 使用 JQuery 动画旋转 SVG 元素

javascript - 如何使用 jquery 多选显示组名称以及下拉列表项?

css - 悬停时从中心填充元素

jquery click事件,使用next和prev将列表项滚动到div的顶部

javascript - jQuery 点击功能不起作用