jquery - Jquery Form提交功能未触发和调试未触发

Question

我一直在努力弄清楚随着时间的推移我在一个旧的 ajax 请求中打破了什么，只是将结果提取到一个 div 中，而不是转到表单提交的页面。Jquery $ 已初始化但此功能不会触发，甚至在文档准备就绪时添加了未触发的警报？

// this is the id of the form
$(document).ready(function() {
      alert("ready");
      $("#rewardsRoll").submit(function(e) {
          alert("roll");
          var form = $(this);
          var url = form.attr('action');

          $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
            success: function(data) {
              $('#RewardsDiceDiv').html(data);
            }
          });
          return false;
        }
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="RewardsDiceDiv">
  <div style="min-height:50px;text-align:center">
    <form id="rewardsRoll" method="post" action="https://www.allfreechips.com/phpBB2/../dicerewards.php">
      <input type="hidden" name="securitytoken" value="tttt" />
      <input type="hidden" name="s" value="" />
      <input type="submit" class="button" name="submit" value="Use one of your 9958 AFC Rewards"></form>
  </div>
  <div class="dice-container">
    <div class="dice-item">
      // show dice...
    </div>

标签： jquery

Answer 1

尝试这个：

$("#rewardsRoll").submit(function(e) {
              e.preventDefault();
              alert("roll");
              var form = $(this);
              var url = form.attr('action');
              $.ajax({
                     type: "POST",
                     url: url,
                     data: form.serialize(),
                     success: function(data) {
                       $( '#RewardsDiceDiv' ).html( data );
                     }
             });
             return false;
}