jquery - django表单的jquery提交未触发

Question

我有以下表格：

<div>
    <form id="edit-form" method="post" action="">{% csrf_token %}
        <fieldset></fieldset>
        <button id="button-submit" type="submit">Submit</button>
    </form>
</div>

我想自己触发提交，以便我可以通过 ajax 来完成。问题是我从来没有到达提交处理程序。这是代码：

 $.post(url,data,function(result){
    $( ".page-added" ).append(result);
    $("#edit-form").submit(function (event){
         event.preventDefault();
     alert('submitted');
     return false;
});

 })
return false
});

结果包含编辑表单。

问题是永远不会触发警报并且永远不会到达提交处理程序。

Answer 1

这可能是因为append()行为同步，因此您#edit-form在 DOM 中存在之前绑定了该处理程序。

您可以对这个问题使用不同的方法，即on()在静态元素上使用：

// bind your submit handler here, assuming .page-added is the static element
$('.page-added').on('submit', '#edit-form', function (e) {
     e.preventDefault();
     alert('submitted');
});

// do your ajax here
$.post(url, data, function (result) {
    $(".page-added").append(result);
});

希望能帮助到你。