2014-10-02 92 views
2

因此,我有一個標籤系統,並且onclick將標籤按鈕更改爲具有一個輸入並提交按鈕的表單。這個問題顯然是因爲表單是在事實之後創建的。無法讓jQuery submit()在由jQuery創建的表單上工作

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()); 
}); 

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

回答

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()); 
    }); 
}); 
+0

這個工作!但它沒有返回任何$(this).serialize()? – aceslowman 2014-10-02 14:06:45

+0

好!考慮接受答案。 :) – Ragnar 2014-10-02 14:10:54

+0

嘗試使用$(「form [name ='addTag']」)。serialize() – Ragnar 2014-10-02 14:12:22

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功能被添加每個新創建窗體

+0

太棒了,但$(this).serialize()不會返回我的輸入內容? – aceslowman 2014-10-02 14:09:36

+1

爲您的輸入字段添加名稱標籤 – Andre 2014-10-02 14:13:14

+0

完美。非常感謝你。 – aceslowman 2014-10-02 14:16:47

1

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

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

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