Javascript 表单提交后数据切换中断

我的web应用程序中有一个通过数据切换显示的表单。我正在更改submit事件的行为，因为我希望在不重新加载页面的情况下提交数据。我可以成功提交表单并按预期折叠切换，但之后，我无法再折叠表单以再次使用它。我做错了什么

下面是我如何控制提交事件

$('form').submit(function(event){
  //event.preventDefault();
  console.log('submit ' + $("input[name=personName]").val());
  //console.log('submit ' + $('#personName').val());
  //socket.emit('add', $('#personName').val());
  socket.emit('add', $("input[name=personName]").val());
  //$('#personName').val('');
  $("input[name=personName]").val('');
  //$("#add-person-panel").toggle();
  $("div[id=add-person-panel]").toggle();
  $("div[id=add-person-panel]").addBack('aria-expanded','false');
  //$("input[name=personName]").toggle();
  //$('#add-person-panel').attr('aria-expanded','');
  //socket.emit('add', $('input[name=personName]'));

  //$('input[name=personName]').val("");

  return false; //do not let the page refresh on submit

});

形式

添加

使用

$（'div#add person panel'）

代替

$（'div[id=add person panel]）

模板类型是什么？它不是简单的html。代码中有

您是否尝试在浏览器中使用服务器端套接字（

socket.emit（…）

）

UPD

使用前是否初始化了套接字

例如：

变量套接字=io（'http://localhost');
socket.on（'news'，函数（数据）{
控制台日志（数据）；
emit（'my other event'，{my:'data'}）；}）；

问题在于我没有使用与open相同的插件（来自bootstrap）来关闭。这是必要的，因为插件跟踪自己的状态

之前：

$（'div#add person panel'）。toggle（）

之后：

$（'div#add person panel'）。折叠（'hide'）

最低解决方案如下：

$('form').submit(function(event){
  event.preventDefault();
  console.log('submit ' + $("input[name=personName]").val());




  $("input[name=personName]").val('');

  $('div#add-person-panel').collapse('hide');
  $('div#add-person-panel').addBack('aria-expanded','false');

  return false; //do not let the page refresh on submit

});

---

1.谢谢，我试试看。2.我在用ejs。3.我正在使用socket.io在客户端和服务器之间发送数据。我使用它的原因不仅仅是表单。你确定你的socket.io库加载正确吗？@user3389171是socket.io服务器端库吗？是否在浏览器中运行用户端提供的脚本？是。我正在记录发送时的连接和结果。不幸的是，$（'div#add person panel'）不起作用。请澄清一下——JS代码在哪里运行：服务器端还是客户端？

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost');
socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });   });
</script>

$('form').submit(function(event){
  event.preventDefault();
  console.log('submit ' + $("input[name=personName]").val());




  $("input[name=personName]").val('');

  $('div#add-person-panel').collapse('hide');
  $('div#add-person-panel').addBack('aria-expanded','false');

  return false; //do not let the page refresh on submit

});