Question

我将Leaflet 1.0与Leaflet.draw插件结合起来。想法是用户可以在地图上绘制一个矩形（称为tempLayer），然后在弹出窗口中填写一个表单以输入一些数据。在this question之后，我能够在Leaflet弹出窗口中创建一个表单。当用户按下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();
  });
}

这很有效，除非用户在提交表单之前碰巧在绘制的项目上或在地图上的其他位置点击。弹出窗口仍然绑定到从图形创建的图层（如果用户再次单击该矩形，弹出窗口将打开），但现在单击Submit会导致整个页面刷新。这是JSFiddle。

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

如何防止＆＃34;提交＆＃34; Leaflet popup

0 个答案: