Javascript 如何预防；提交；从传单弹出窗口中的表单中选择事件

我正在将传单1.0与传单.绘图插件相结合。其思想是用户可以在地图上绘制一个矩形（称为

tempLayer

），然后在弹出窗口中填写表单以输入一些数据。接下来，我能够在弹出的传单中创建一个表单。我使用了

e.preventDefault（）

防止用户按下

Submit

按钮时刷新页面

// create user-editable form in popup
function createUserEditablePopup(tempLayer) {
  var popupContent = '<form role="form" class="form" enctype="multipart/form-data">' +
    '<div class="form-group">' +
    '<label class="control-label col-sm-5">Enter data:</label>' +
    '<input type="string" placeholder="type here" id="input1"/>' +
    '</div>' +
    '<div class="form-group">' +
    '<div style="text-align:center;" class="col-xs-4">' +
    '<button type="submit">Submit</button></div>' +
    '</div>' +
    '</form>';
  tempLayer.bindPopup(popupContent).openPopup();

  // prevent the form from submitting and refreshing page
  $(".form").submit(function(e) {
    // do some logic

    // prevent form submission
    e.preventDefault();
  });
}

//在弹出窗口中创建用户可编辑表单
函数createUserEditablePopup（tempLayer）{
var popupContent=“”+
'' +
'输入数据：'+
'' +
'' +
'' +
'' +
“提交”+
'' +
'';
bindPopup（popupContent）.openPopup（）；
//阻止表单提交和刷新页面
$（“.form”）.submit（函数（e）{
//做些逻辑分析
//防止表格提交
e、 预防默认值（）；
});
}

这很有效，除非用户在提交表单之前在绘制的项目上或地图上的不同位置单击。弹出窗口仍然绑定到从图形创建的图层（如果用户再次单击矩形，弹出窗口将打开），但现在单击

Submit

会刷新整个页面。这是一个例子

---

那么，即使用户导致弹出窗口移动，我如何防止页面刷新事件触发？

由于弹出窗口是动态创建的，jquery选择器

。表单不应应用于它。为了捕获动态创建的控件/元素，您需要使用附加到文档正文的
.on
方法。所有这些代码都应该出现在
createUserEditablePopup
方法之外

$('body').on('submit', '.form', mySubmitFunction);

function mySubmitFunction(e) {
    e.preventDefault();  // This should really be the first line

    // Other logic
}

将
e.preventDefault（）
移动到函数的第一行。谢谢，太好了！问：为什么
e.preventDefault（）
应该是第一行？@user2441511:我有两个个人原因。首先，它是一个通用标准，让下一个开发人员立即知道该函数应该阻止提交。第二种情况是，如果该方法因任何原因退出（异常、逻辑返回或类似情况），则不会调用该方法，浏览器仍将执行提交。