使用d3而不是jquery来处理表单输入会导致重新加载"/"

Question

要点http://bl.ocks.org/gregsgit/7cbe5a54fdae2492a826 或https://gist.github.com/gregsgit/7cbe5a54fdae2492a826

我试图只使用d3而不是d3和jquery.后端是node.js + express + http + fs + socket.io.前端使用套接字客户端,d3,jquery.

替换以下内容:

$('form').submit(function(){
  socket.emit('sent message', $('#theInput').val());
  $('#theInput').val('');
  return false;
});

同

d3.select("#theForm").on("submit", function() {
  var inp = d3.select("#theInput");
  var v = inp.property("value");
  inp.property("value", "");
  socket.emit('sent message', v);
  return false;
});

导致重新加载"/",这将删除我在index.html中积累的状态.

换句话说,在节点顶层multidraw-server.js中,我在请求"/"时打印到控制台.使用jquery代码,"/"被加载一次,我可以多次提交表单而无需重新加载.使用d3表单处理,在每个表单输入后重新加载"/".

有任何想法吗？

Answer 1

问题是除了返回之外,您还需要取消表单的提交false,这可以通过调用来完成event.preventDefault.您可以通过d3.event.preventDefault()在.on("submit", ...)函数开头调用D3来完成此操作.