VS Code中HTML按钮无法触发绑定Javascript功能问题求助

问题根因 #

1. 未引入jQuery依赖：你提供的JS代码完全基于jQuery语法实现，HTML中没有引入jQuery库时，所有JS逻辑都会抛出$ is not defined错误，点击事件绑定失效。submit类型的按钮会触发默认表单提交行为，页面刷新导致输入内容清空。
2. 脚本执行顺序错误：即使补充了jQuery引入，也需要保证加载顺序为「jQuery库 → 拓展jsonify/dejsonify方法的逻辑 → 按钮点击事件绑定逻辑」，否则会出现方法未定义的报错。
3. 按钮类型默认提交风险：submit类型的按钮在事件绑定失败时会直接提交表单刷新页面，不利于问题排查。

具体修改步骤 #

• 补充jQuery引入：在你自己的JS脚本引入之前，先引入jQuery库，你可以直接用CDN地址，也可以下载到本地后引入本地路径。
• 调整脚本引入顺序：把所有script标签放在</body>标签之前，确保DOM元素已经加载完成后再执行JS逻辑。
• 调整按钮类型（可选，建议）：把两个按钮的type属性从submit改为button，避免默认表单提交行为。
• 调整JS代码顺序：你的自定义JS文件中，要先写!function (i) {...}(jQuery)这段拓展jsonify/dejsonify方法的代码，再写$(function () {...})这段绑定点击事件的代码。

修改后参考代码 #

HTML示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单JSON转换测试</title>
</head>
<body>
<h2>Form</h2>
<form id="myform" action="" method="post">
  First Name:
  <input type="text" name="Fname" maxlength="12" size="12" />
  <br/> Last Name:
  <input type="text" name="Lname" maxlength="36" size="12" />
  <br/> Gender:
  <br/> Male:
  <input type="radio" name="gender" value="Male" />
  <br/> Female:
  <input type="radio" name="gender" value="Female" />
  <br/> Favorite Food:
  <br/> Steak:
  <input type="checkbox" name="food" value="Steak" />
  <br/> Pizza:
  <input type="checkbox" name="food" value="Pizza" />
  <br/> Chicken:
  <input type="checkbox" name="food" value="Chicken" />
  <br/>
  <textarea wrap="physical" cols="20" name="quote" rows="5">Enter             
your favorite quote!</textarea>
  <br/> Select a Level of Education:
  <br/>
  <select name="education">
    <option value="Jr.High">Jr.High</option>
    <option value="HighSchool">HighSchool</option>
    <option value="College">College</option>
  </select>
  <br/> Select your favorite time of day:
  <br/>
  <select size="3" name="TofD">
    <option value="Morning">Morning</option>
    <option value="Day">Day</option>
    <option value="Night">Night</option>
  </select>
  <br/> Range Slider:
  <input type="range" name="rangeslider" min="10" max="50" step="10"         
value="20" data-rangeslider="">
  <p>
    <input id="toJson" type="button" value=" toJson " />
    <input id="toForm" type="button" value=" FillForm " />
</p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>
<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入你存放JS逻辑的文件，以下代码如果写在Converter.js里就只需要引入Converter.js -->
<script src="Converter.js"></script>
</body>
</html>

Converter.js示例 #

// 先拓展方法
!function (i) {
    i.fn.jsonify = function (t) {
        var n = i.extend({ stringify: !1 }, t), s = {}
        return i.each(this.serializeArray(), function () { this.name in s ? (s[this.name].push || (s[this.name] = [s[this.name]]), s[this.name].push(this.value || "")) : s[this.name] = this.value || "" }), n.stringify ? JSON.stringify(s) : s
},
i.fn.dejsonify = function (t) {
    "string" == typeof t && (t = JSON.parse(t)), i.each(this.find("*[name]"), function () {
        var n = i(this).attr("type"), s = t[i(this).attr("name")]
        "radio" === n || "checkbox" === n ? i.isArray(s) ? i(this).prop("checked", i.inArray(i(this).val(), s) > -1) : i(this).prop("checked", i(this).val() === s) : i(this).val(s)
    })
}
}(jQuery)

// 再绑定事件
$(function () {
$('#toJson').click(function () {
    var jsonify = $("#myform").jsonify({
        stringify: true
    });
    console.log(jsonify);
    $('#result').text(jsonify);
    return false;
});

$('#toForm').click(function () {
    $("#myform").dejsonify({
        "Fname": "Roger",
        "Lname": "Tremblay",
        "gender": "Male",
        "food": ["Steak", "Pizza"],
        "quote": "I am the best",
        "education": "HighSchool",
        "TofD": "Day",
        "rangeslider": "40"
    });
    return false;
});
});

排查技巧 #

如果修改后依然有问题，按F12打开浏览器开发者工具，切换到Console控制台标签页，查看报错信息即可快速定位问题。

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