PhoneGap开发应用：移动端提交按钮仅可触发一次问题咨询

兄弟，我帮你捋捋这个问题：浏览器里正常，移动端按钮点一次就歇菜，但键盘Go键又没问题，结合你给的代码，大概率是事件绑定在PhoneGap的WebView环境里出了点小状况——毕竟WebView的事件机制和普通浏览器还是有点差别的。

下面给你几个靠谱的解决办法，你挨个试试：

1. 换个绑定方式：直接给按钮绑点击事件 #

你现在是绑的表单submit事件，不如直接给提交按钮绑定点击事件，同时兼容表单提交（给键盘Go键留后路），这样更可控：

$(function() {
  // 给你的提交按钮绑点击事件，记得把id换成你实际的按钮id
  $("#your-submit-btn-id").on("click", function(e) {
    e.preventDefault(); // 阻止按钮默认跳转行为
    // 把表单处理逻辑抽出来，方便复用
    handleFormSubmit();
  });

  // 保留表单submit事件处理，兼容键盘Go键触发的情况
  $("form").submit(function(e) {
    e.preventDefault();
    handleFormSubmit();
    return false;
  });
});

// 独立的表单处理函数，你原来的提交逻辑都放这儿
function handleFormSubmit() {
  // 比如表单验证、AJAX提交啥的，写在这里
  console.log("表单提交成功触发啦");
}

这种分开处理的方式，既能照顾到键盘Go键，又能避免按钮点击事件莫名其妙丢失的问题。

2. 如果有动态DOM操作，用事件委托 #

要是你提交表单后，有动态替换表单或者按钮的操作（比如提交后刷新表单内容），那原来绑定的事件会直接失效。这时候就得用事件委托，把事件绑到父元素上：

$(function() {
  // 把事件委托到body（或者表单的父容器，更高效）
  $("body").on("click", "#your-submit-btn-id", function(e) {
    e.preventDefault();
    handleFormSubmit();
  });

  $("body").on("submit", "form", function(e) {
    e.preventDefault();
    handleFormSubmit();
    return false;
  });
});

事件委托的好处就是，哪怕后续按钮被重新渲染了，事件依然能触发，不会掉链子。

3. 检查下PhoneGap的WebView配置 #

有时候PhoneGap的默认配置可能会卡事件，你去config.xml里确认下这几个配置是不是开着的：

<!-- 允许DOM存储 -->
<preference name="domStorageEnabled" value="true" />
<!-- 启用JS -->
<preference name="javascriptEnabled" value="true" />
<!-- 禁止过度滚动，避免干扰事件 -->
<preference name="DisallowOverscroll" value="true" />

确保这些配置都设为true，别让WebView限死了JS的事件处理。

4. 排查是不是按钮被意外禁用了 #

有时候提交后，可能你的逻辑里不小心把按钮禁用了（比如$("#your-submit-btn-id").prop("disabled", true)），但忘了重新启用。你可以在点击事件里加个打印，看看按钮状态：

$("#your-submit-btn-id").on("click", function(e) {
  console.log("当前按钮是否禁用：", $(this).prop("disabled"));
  e.preventDefault();
  handleFormSubmit();
});

要是打印出来是true，那就是禁用的问题，找个合适的时机把按钮重新启用就行。

要是这些方法都没解决，你把完整的表单代码和提交逻辑贴出来，我再帮你深挖~

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