Question

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

以下是我控制提交事件的方法

$('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 class="panel panel-default">
      <div class="panel-heading">
        <%
         if (hasKioskPermissions === true || hasDigmaKioskPermissions === true){ %>
          <a data-toggle="collapse" href="#add-person-panel" class="collapsed">
            "Add Person To Local Queue"
            ::after
          </a>
         <% } else { %>
          <a data-toggle="collapse disabled" href="#add-person-panel" class="collapsed">
            "Add Person To Local Queue"
            ::after
          </a>
         <%}%>
      </div>
      <div id="add-person-panel" class="panel-body collapse">
        <form data-parsley-validate="" class="form-horizontal">
          <div class="form-group">
            <div class="col-sm-5 col-xs-8">
                <input name="personName" type="text" maxlength="40" placeholder="Enter name" required class="form-control" autocomplete="off">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button type="submit" data-loading-text="Adding..." class="btn btn-lg btn-block btn-primary">Add</button>
            </div>
          </div>
        </form>
      </div>
  </div>

Answer 1

使用$('div#add-person-panel')代替$("div[id=add-person-panel]")。
什么是模板类型？它不是简单的HTML。代码中有<% %>。
您是否尝试在浏览器中使用服务器端套接字（socket.emit(...)）？

<强> UPD

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

docs有一个例子：

<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>

Answer 2

问题是我没有使用相同的插件（来自bootstrap）来关闭，就像我打开一样。这是必要的，因为插件跟踪它自己的状态。

之前：

$（ 'DIV＃添加人面板'）切换（）;

后：

$（ 'DIV＃添加人面板'）崩溃（ '隐藏'）;

以下最小解决方案：

$('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

});

表单提交后数据切换中断

2 个答案: