Question

我试图在ajax响应之后调用jQuery.submit（）函数。其中ajax响应包含一个表单。但是当我提交表单而没有刷新时，它无法调用jQuery.submit（）函数。

在成功执行ajax响应后，我在表单前加上现有代码

success: function(data) {
        event.preventDefault();
        $(".name_wrapper").prepend('<form class="replyName"><textarea name="name"   placeholder="Write your name"></textarea><button type="submit" class=" btn btn-primary">Reply your name</button></form>');
},
error: function(data) {}

所以在将表单添加到现有代码之后。当我尝试提交表单时，它已刷新而不是调用该函数。如何使jQuery.submit（）可以从ajax响应中运行？

 $(".replyName").submit(function(event) {
     alert(event.currentTarget[0].value);
 });

Answer 1

您应该在submit表单之后放置prepend事件。因为event仅在加载DOM后绑定到元素。

由于动态表单prepend，jQuery不知道它必须提交哪个元素，因为它在绑定时不存在事件

success: function(data) {
        event.preventDefault();
        $(".name_wrapper").prepend('<form class="replyName"><textarea name="name"   placeholder="Write your name"></textarea><button type="submit" class=" btn btn-primary">Reply your name</button></form>');

        $( ".replyName").submit(function( event ) {
            alert(event.currentTarget[0].value);

            event.preventDefault();
        });
},
error: function(data) {}

Answer 2

由于表单未在文档中创建，因此您无法听取提交事件，除非您在将表单添加到dom之后放置事件侦听器

success: function(data) {
    event.preventDefault();
    $(".name_wrapper").prepend('<form class="replyName"><textarea name="name"   placeholder="Write your name"></textarea><button type="submit" class=" btn btn-primary">Reply your name</button></form>');
    $(".replyName").submit(function(event) {
    alert(event.currentTarget[0].value);
});

},
error: function(data) {}

您还可以从body dom处理事件

$('body').on('submit', '.replyName', function(e){
  // code here
});

Answer 3

你可以做两件事：

你可以像这样重新点击点击功能：

success: function(data) {
        event.preventDefault();
        $(".name_wrapper").prepend('<form class="replyName"><textarea name="name"   placeholder="Write your name"></textarea><button type="submit" class=" btn btn-primary">Reply your name</button></form>');
 $('button').bind('click', function (event) {
      event.preventDefault();
      alert(event.currentTarget[0].value);
});
},
error: function(data) {}

或者你可以试试这个

$('button').on('click', function(e){
  // code here
});

jQuery .submit（）在ajax响应后无法正常工作

3 个答案: