如何在PHP场景下使用jQuery实现点击或回车触发相同提交功能

实现方案 #

你可以通过给文本框绑定回车事件、触发对应按钮的点击逻辑来实现需求，不需要大幅修改原有代码，两种实现方式可选：

极简实现（无需改动原有逻辑）

直接给所有文本框绑定回车事件，自动触发相邻提交按钮的原有点击逻辑，适合不想重构原有代码的场景：

// 绑定回车提交事件，支持动态生成的内容
$(document).on('keydown', '.feed_in_input', function(e) {
  // 判断是否按下回车键
  if (e.key === 'Enter' || e.keyCode === 13) {
    // 阻止回车默认的换行、表单提交行为
    e.preventDefault();
    // 触发当前文本框对应提交按钮的点击事件，复用原有逻辑
    $(this).next('img').click();
    // 提交后清空输入框，不需要可以删掉这行
    $(this).val('');
  }
});

规范实现（推荐）

先把原有提交逻辑抽为公共函数，再分别绑定点击和回车事件，后续维护更方便：

1. 抽取公共提交函数

// 第一类评论提交逻辑，把原有.feed_reply_smiley2点击事件的代码挪到这里
function submitPost(btn) {
  // 原有代码中所有的$(this)替换为$(btn)即可
}

// 第二类回复提交逻辑，把原有.feed_reply_smiley点击事件的代码挪到这里
function submitReply(btn) {
  // 原有代码中所有的$(this)替换为$(btn)即可
}

2. 改写原有点击事件绑定

$(document).on('click', '.feed_reply_smiley2', function(e) {
  submitPost(this);
});
$(document).on('click', '.feed_reply_smiley', function(e) {
  submitReply(this);
});

3. 绑定回车提交事件

$(document).on('keydown', '.feed_in_input', function(e) {
  if (e.key === 'Enter' || e.keyCode === 13) {
    e.preventDefault();
    const $btn = $(this).next('img');
    if ($btn.hasClass('feed_reply_smiley2')) {
      submitPost($btn[0]);
    } else if ($btn.hasClass('feed_reply_smiley')) {
      submitReply($btn[0]);
    }
    $(this).val('');
  }
});

注意事项

建议你后续修正循环生成的重复ID问题，同一页面内相同ID会导致DOM选择异常，你可以给两类文本框、按钮分别加不同的ID前缀区分，比如第一类ID为txt_post_'.$FeedId.'、第二类为txt_reply_'.$FeedId.'。

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