リーフレットポップアップのフォームから「submit」イベントを防ぐ方法

Question

リーフレット1.0をLeaflet.drawプラグインと組み合わせています。ユーザーはマップ上に長方形（tempLayer）を描き、ポップアップでフォームに記入してデータを入力することができます。 this questionに続いて、リーフレットポップアップ内にフォームを作成することができました。ユーザーがSubmitボタンを押したときにページがリフレッシュされないようにするには、e.preventDefault();を使用しました。

// 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があります。

したがって、ユーザーがポップアップを移動させても、ページ更新イベントが発生しないようにするにはどうすればよいですか？

Answer 1

ポップアップが動的に作成されるため、jqueryセレクタ.formは適用されません。動的に作成されたコントロール/要素が捕捉されるようにするには、文書本体に添付された.onメソッドを使用する必要があります。このコードはすべて、お客様のcreateUserEditablePopupメソッドの外に表示されます。

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

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

    // Other logic 
}