在JavaScript中創建的HTML表單不響應。提交

我已經使用javascript動態地向我的html頁面添加了一個表單。當我這樣做時，表單上的.submit不起作用。但是，如果我在html中創建完全相同的表單，它將按預期工作。在JavaScript中創建的HTML表單不響應。提交

這裏是一個小提琴：http://jsfiddle.net/dwha77g4/4/

以下代碼：

$('.submit-form').submit(function(e){ 
    alert("test"); 
    e.preventDefault(); 
});

上在小提琴的第一個按鈕運行，但不是第二動態創建的一個。

來源

2014-12-08 rawbeans

的Try ... Working Demo

$("body").on('submit', '.submit-form', function(e) { 
    alert("test"); 
    e.preventDefault(); 
});

基本上，動態創建的內容不處理前附着事件很好。由於當您嘗試運行提交時該對象不存在，因此沒有任何附加內容。我在這裏做的是附加一個事件到搜索.submit-form的身體上，而不管它是在什麼時候創建的。

來源

2014-12-08 00:58:50 rfornal

感謝您對正在發生的事情的解決方案和優秀的解釋。 – rawbeans 2014-12-08 01:18:46

感謝@Jatin爲jsFiddle！ – rfornal 2014-12-08 01:50:05

創建事件偵聽器函數的頂級代碼在將html代碼片段插入到DOM之前運行，因此它不受限於實際的表單。您想使用.on（）將事件綁定到將來添加的DOM內容。只需簽出.on（）的jquery文檔，非常自我解釋。

您還可以重新組織代碼，以便在插入HTML代碼段後設置.submit（），並且該代碼也適用於您。

來源

2014-12-08 01:01:37 Born2Code

與您的代碼的問題是，當您添加listerner到提交事件，沒有任何元素與查詢「.submit形式」相匹配，因爲你DINAMIC形式尚未創建。

你可以做

$(document).ready(function() { 
    var formHTML = "<li><form action='#' method='POST' class='submit-form'><input type='submit' value='submit dynamic' /></form></li>" 
    $("#list-container").append(formHTML); 

    $('.submit-form').submit(function(e){ 
     alert("test"); 
     e.preventDefault(); 
    }); 
});

這樣，您將創建表單，然後將監聽器添加到提交事件。

來源

2014-12-08 01:04:59

對於DOM中的新對象，我們必須使用「on」jQuery函數。 http://api.jquery.com/on/ 所以嘗試改變文件的身體爲建議rformal。

$(document).on("submit", ".submit_form", function(e){ 
    e.preventDefault(); 
    alert("test"); 

});

說的是，如果你想發送你的表單，你不應該使用「e.preventDefault」。我不知道它是否是你的情況，因爲e.preventDefault（）將防止發生默認事件。如果你想更好地瞭解這一點，請參閱這篇文章。 event.preventDefault() vs. return false

注：使用submit_form而不是提交表單

來源

2014-12-08 01:16:21 zwitterion

在JavaScript中創建的HTML表單不響應。提交

回答

相關問題