在$(document).ready()中绑定两个提交按钮的行为问题咨询

当然可以在同一个$(document).ready()函数里绑定多个按钮的点击事件啦！你的写法本身没问题，button1失效大概率不是这个原因，咱们来一步步排查可能的问题：

1. DOM元素不存在或选择器错误 #

先检查页面里是否真的存在id为submit1的按钮：

• 有没有拼写错误？比如大小写不一致、多打/少打了字符（比如写成subm1t）
• 可以在$(document).ready()里加一行调试代码，看看能不能找到这个元素：

  console.log($('#submit1').length);
  

  如果输出是0，说明页面里找不到这个元素，那自然绑定不了事件。

2. 代码存在语法错误 #

看你贴的代码片段里，submit1的点击函数最后是return false; // 阻止默认表...，是不是实际代码里没写完？比如少了闭合的}或者);？语法错误会导致后续代码无法执行，直接打开浏览器控制台（F12）看看有没有报错信息。

3. 事件被覆盖或阻止冒泡 #

• 有没有其他脚本也给submit1绑定了点击事件？后面绑定的事件可能会覆盖前面的
• 按钮所在的父元素有没有阻止事件冒泡的代码？比如父元素的click事件里用了event.stopPropagation()，导致按钮的点击事件无法触发

4. 表单默认行为没彻底阻止 #

如果submit1是表单的提交按钮，有时候return false的阻止效果可能不稳定，试试用更明确的方式：

$('#submit1').click( function(event) {
    event.preventDefault(); // 明确阻止表单默认提交行为
    event.stopPropagation(); // 阻止事件向上冒泡
    alert("button1");
});

修正后的完整示例代码 #

$(document).ready( function() {
    // 用户点击submit2
    $('#submit2').click( function() {
        alert("button2");
        return false; // 阻止默认表单提交
    });

    // 用户点击submit1
    $('#submit1').click( function(event) {
        event.preventDefault();
        alert("button1");
    });
});

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