無法讓jQuery submit（）在由jQuery創建的表單上工作

Question

因此，我有一個標籤系統，並且onclick將標籤按鈕更改爲具有一個輸入並提交按鈕的表單。這個問題顯然是因爲表單是在事實之後創建的。

HTML：

<button class="btn btn-success addTag"> 
    <a href="">+</a> 
    <span class="label addTagBody">Add a skill</span> 
</button> 

的jQuery：

$('.addTag').click(function() { 
    $('.addTag').replaceWith('<div class="btn btn-success addTag"><form name="addTag"><input placeholder="Enter new tag" type="text" class="addTagBody"><input type="submit" value="Add"></form></div>'); 
}); 

$("form[name='addTag']").on('submit', function(event) { 
    event.preventDefault(); 
    alert($(this).serialize()); 
}); 

在處理這樣的情況下任何提示？

Answer 1

你要綁定的時間（提交）addTag後事件，因爲最初的形式沒有按不存在。

$('.addTag').click(function() { 
    $('.addTag').replaceWith('<div class="btn btn-success addTag"><form name="addTag"><input placeholder="Enter new tag" type="text" class="addTagBody" name="tag"><input type="submit" value="Add"></form></div>'); 
    $("form[name='addTag']").on('submit', function(event) { 
     event.preventDefault(); 
     alert($(this).serialize()); 
    }); 
}); 

Answer 2

改變你的jQuery部分

$('.addTag').click(function() { 
    $('.addTag').replaceWith('<div class="btn btn-success addTag"><form name="addTag"><input placeholder="Enter new tag" type="text" class="addTagBody"><input type="submit" value="Add"></form></div>'); 
    $("form[name='addTag']").on('submit', function(event) { 
     event.preventDefault(); 
     alert($(this).serialize()); 
    }); 
}); 

這樣的形式submition功能被添加每個新創建窗體

Answer 3

你必須使用現有元素的事件綁定在未來創建的元素：

$(document).on("submit", "form[name='addTag']", function(){ ... }); 

此外，添加name屬性爲您窗體的文本輸入，用於將包括在序列化形式它們的值。

Answer 4

當您動態創建元素時，您需要使用事件委託。欲瞭解更多信息，請參閱：http://learn.jquery.com/events/event-delegation/

$(document).on('submit', 'form[name="addTag"]', function(){ ... });