javascript - 无法让 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

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

所以每次创建新表单时都会添加表单提交功能