Laravel项目中HTML按钮触发JavaScript代码失效问题求助

核心问题：jQuery选择器错误 #

你的JavaScript代码里选择按钮时漏掉了id选择器的#前缀，jQuery通过id选择元素必须用#id的格式，而非直接写id名称，这是事件绑定无效的主要原因。

完整修复步骤 #

1. 修正JavaScript选择器（api.js）

将选择器改为$("#testButton")，同时确保语法正确，若使用submit类型按钮，需阻止表单默认提交行为避免页面跳转：

$(document).ready(function() {
    $("#testButton").click(function(event) {
        // 阻止submit按钮的默认表单提交行为
        event.preventDefault();
        alert("button pressed");
    });
});

或者使用事件委托写法（同样要加#）：

$(document).on("click", "#testButton", function(event) {
    event.preventDefault();
    alert("button pressed");
});

2. 确保正确引入依赖与JS文件

在create.blade.php中，必须先引入jQuery，再引入api.js，否则jQuery未加载时api.js会报错，建议放在<body>标签末尾：

<!-- 引入jQuery（可使用CDN或本地文件） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 引入你的api.js（假设放在public/js目录下） -->
<script src="{{ asset('js/api.js') }}"></script>

3. 可选：调整按钮类型（无需提交表单时）

若按钮不需要提交表单，可将type改为button，无需额外阻止默认行为：

<input id="testButton" type="button" value="test"/>

验证方法 #

1. 打开浏览器开发者工具（F12），切换到Console面板，查看是否有JavaScript错误。
2. 点击按钮，检查是否弹出alert且Console无报错。

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