如何在click函数内正确实现submit函数？（附代码故障排查）

你的核心问题是：在addCart函数里，你只是给表单绑定了submit事件的处理器，但并没有实际触发表单的提交动作，所以AJAX代码完全没执行。另外，你的HTML里还有个小问题：a标签同时设置了两个id属性（id="submit"和id="cartsub"），这不符合HTML规范（id必须唯一），得先修正这个。

方案一：直接在addCart里执行AJAX逻辑（推荐） #

既然你是通过点击a标签触发操作，完全不需要借助表单的submit事件，直接在addCart函数里处理AJAX即可，这样逻辑更直接，也避免了事件绑定的问题：

修正后的HTML #

<form method="POST" class="<?php echo $row['code']; ?>" id="form<?php echo $row['id']; ?>">
  <!-- 移除重复的id，保留class即可 -->
  <a class="product-links cartsub" href='javascript:addCart(<?php echo $row['id']; ?>);'>
    <i class="fa fa-shopping-cart"></i>
  </a>
  <!-- 假设这里有你需要的input#code -->
  <input type="hidden" id="code" value="<?php echo $row['code']; ?>">
</form>

修正后的JavaScript #

function addCart(id){
  // 获取目标表单
  const $form = $("#form" + id);
  // 阻止a标签默认的跳转行为（虽然href是javascript，但加上更稳妥）
  event.preventDefault();
  
  // 获取code值
  const code = $form.find('input#code').val();
  const dataString = 'code=' + code;

  // 执行AJAX提交
  $.ajax({
    type: 'POST',
    url: 'addcart.php',
    data: dataString,
    cache: false,
    success: function (result) {
      if(result === "success"){
        alertify.success("המוצר נוסף לעגלה");
        $("#plus").fadeIn(300).delay(1500).fadeOut(300);
      } else{
        alertify.error("המוצר כבר קיים בעגלה");
      }
    }
  });

  // 合并重复的load操作，提升性能
  $("#cartreload1, #cartreload2").load("product.php #cartreload1, #cartreload2");
}

方案二：绑定submit事件后立即触发（不推荐，但满足你想保留submit逻辑的需求） #

如果你坚持要通过表单submit事件来处理，那需要在绑定事件后主动触发submit动作，同时还要避免重复绑定事件（否则多次点击会执行多次AJAX）：

function addCart(id){
  const $form = $("#form" + id);
  
  // 先解绑之前的submit事件，避免重复绑定导致多次执行
  $form.off('submit').on('submit', function(e) {
    e.preventDefault();
    const code = $(this).find('input#code').val();
    const dataString = 'code=' + code;

    $.ajax({
      type: 'POST',
      url: 'addcart.php',
      data: dataString,
      cache: false,
      success: function (result) {
        if(result === "success"){
          alertify.success("המוצר נוסף לעגלה");
          $("#plus").fadeIn(300).delay(1500).fadeOut(300);
        } else{
          alertify.error("המוצר כבר קיים בעגלה");
        }
      }
    });

    $("#cartreload1, #cartreload2").load("product.php #cartreload1, #cartreload2");
  });

  // 主动触发表单的submit事件，执行上面绑定的逻辑
  $form.submit();
}

为什么原来的代码不生效？ #

你之前的代码只是给表单添加了submit事件的回调函数，但从来没有调用$form.submit()来触发这个事件，所以AJAX代码根本没有机会执行。而当你不包裹在click函数里时，页面加载就绑定了submit事件，此时如果表单被其他方式提交（比如按钮点击），就会触发回调，但你现在的触发源是a标签的点击，所以必须主动触发submit或者直接执行逻辑。

内容的提问来源于stack exchange，提问作者Yotam Dahan