提交表單內的彈出窗口不返回結果

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/