无法让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(){ ... });