如何將提交事件添加到動態生成的表單？

Question

下面是生成表單的PHP代碼： form.php的

<?php 
    echo ' 
    <form action="/wall/comment.php" method="post" id="submit-comment-form" name="'.$postid.'"> 
    <div class="write-comment-profile-pic"> 
    <img src= "'.$myprofilepic.'" width="30" height="30""/> 
    </div> 
    <div class="write-comment-textbox-wrap"> 
    <input type="text" class="textbox4" id="write-comment-textbox" value="Write a comment..." name="comment" style="width:65%;" /> 
    </div> 
    </form> 
    '; 
    ?> 

jQuery代碼它得到了form.php的

$('#images img').click(function() { 
$.get('form.php', function(data) { 
$('#image-pop-up').html(data); 
}); 
}); 

，這裏是jQuery的代碼需要提交表單：

$('#image-pop-up').on('submit', '#submit-comment-form', function() { 
evt.preventDefault();  
}); 

index.html中的圖像，彈出DIV

是一個空 只是

<div id="image-pop-up">

</div> 

這是不工作...有什麼不對？如何解決它？

Answer 1

我懷疑問題在於選擇器，而目標元素或者沒有找到，或者是正確的元素。

幾件事情，可能是錯誤的：

1. 雙ID引用是不必要的：它只是出問題的另一個潛在的地方。
2. 如果執行此代碼時尚未生成#image-pop-up，則該事件將永遠不會被綁定。
3. submit事件僅在表單上觸發，因此您需要確保這是您的目標。
4. 您可以撥打preventDefault()evt，但evt尚未綁定到events參數。

。假定#submit-comment-form是你正在處理的形式，下面的代碼應該不管任何元素是否可用，當執行工作：

$(document).on('submit', '#submit-comment-form', function(evt){ 
    evt.preventDefault(); 
})