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

将您的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 2

你必须在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 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(){ ... });

无法获得jQuery submit（）来处理由jQuery创建的表单

4 个答案: