Question

我正在尝试使用提交按钮在我的数据库中的传单弹出窗口中发送一个表单，但是如果我单击每个标记的提交按钮（我使用Leaflet.draw插件创建），则没有任何反应。这是我的代码：

map.on('draw:created', function (e){
    var type = e.layerType;
    layer = e.layer;
    var y = layer.getLatLng().lat;
    var x = layer.getLatLng().lng;

var Marker = drawnItems.addLayer(layer);

Marker.on('click', function (e){
  var popupContent =  '<form role="form" id="form" enctype="multipart/form-data" class ="form-horizontal" >'+ 
 '<div class="form-group">'+
'<label>Adresse <input type="text" name="text" id="text"></label>' +     '<br/>'  +
'<button type="button" class="btn btn-warning" id="submit">Add</button>'+ 
'</div>' +
'</form>';

 var popup = L.popup()
  .setLatLng(e.latlng)
  .setContent(popupContent)
  .openOn(map);

 map.addLayer(layer);

 });

$('#form').submit(function(event) {
  event.preventDefault();
  console.log("submit worked!");
  var text = $('#text').val();

   });

 });

Answer 1

当你执行$('#form').submit()时，<form id="form">还不是一个节点（你只是将HTML代码定义为字符串）。

因此jQuery将无法在其上附加事件侦听器。

演示：https://jsfiddle.net/fbfy7sLy/

您有两种简单的解决方法：

在创建节点后附加事件侦听器。即在您将弹出窗口添加到地图上的情况下。

使用事件委派，这样即使稍后创建节点，侦听器也会附加到已存在的父节点，但它的工作就像一样监听器附加到新节点。例如。你可以使用jQuery＆＃39; s .delegate

$(document).delegate('#form', 'click', function (event) { event.preventDefault(); // your stuff });

演示：https://jsfiddle.net/fbfy7sLy/1/

在传单弹出窗口内提交表单不返回结果

1 个答案: