问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

奇怪！jquery .post()多次请求

头像
impig33
    713197891
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script charset="utf-8" src="/jquery.js"></script>
    <script type="text/javascript">        
        function sub(t){
                $(document).ready(function(){
                    $('#doEdit').click(function(){
                        $.post(
                            'r.php'
                        );
                    });
                });
        }
    </script>
</head>
<body>
<form name="example" id="example" enctype="multipart/form-data">
<div>
    <input type="text" name="title" id="title" value=""/>
    <input type="button" value="存儲文章" id="doEdit" onclick="sub('doEdit');" style="width:80px; height:32px; background:#ffcc66;"/>

<p>&nbsp;</p>
</div>
</form>
</body>
</html>

    点了按钮后，第一次看不到提交，再点一次一下子发2个post提交，再点一次一下子发5个post提交，以此递增。

    firebug调试，点第一次不能进入$.post()，点第二次在$.post()循执行2次，第三次循环执行5次，以此递增。

    图片描述

    图片描述

    图片描述

    于是jquery导入文件换了1.3 1.8和2.0，换了chrome和firefox都是这样。

    不解。

    javascriptjquery
    阅读 6.9k
    4 个回答
    得票最新
    头像
    zonxin
      12.1k2632
      ✓ 已被采纳

      改成这样就好了

      $(document).ready(function(){
  $('#doEdit').click(function(){
  $.post(
    'r.php'
  );
});

      你代码的错误在于：
      一开始，什么都没有执行，所以不会有什么东西。
      第一次点击，执行函数sub，其中给#doEdit添加提交函数。
      第二次点击，执行sub，其中又给#doEdit添加提交函数；另外执行第一次点击添加的提交函数，所以提交一次。
      第三次点击，执行sub，其中又给#doEdit添加提交函数；另外，上两次点击也添加了两个提交函数，此时要执行。所以提交两次。

      头像
      槑深度
        33747

        和jquery无关，你点击事件调用 sub函数，在里头添加事件监听，自然就第一次无效，第二次1个请求，第三次2个请求咯

        头像
        楼教主
          1.6k116
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script charset="utf-8" src="/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#doEdit').click(function() {
      $.post(
        'r.php'
      );
      return false;
    });
  });
  </script>
</head>

<body>
  <form name="example" id="example" enctype="multipart/form-data">
    <div>
      <input type="text" name="title" id="title" value="" />
      <input type="button" value="存儲文章" id="doEdit" style="width:80px; height:32px; background:#ffcc66;" />

      <p>&nbsp;</p>
    </div>
  </form>
</body>
</html>
          头像
          impig33
            713197891

            自己答一下吧。

            错误在于，把ready()写到了sub()里面，导致了jq与js原生的混用。

            $(document).ready()是在网页加载完成后浏览器自动反向绑定事件的，所以不需要给按钮加click()事件。

            其次，如果给元素加了事件监听，在js里面应该用原生的方法接收参数并处理，接收后如果想用jq处理，那么需要进行js->jq的转换。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题