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

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/

你有2个容易解决方法：

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

• 使用事件代表团，这样即使以后创建的节点，监听器连接到一个父节点已经存在的，但它的工作原理仿佛听众被附加到新的节点。例如。你可以使用jQuery的.delegate

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

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