Question

我有3个步骤要做：

通过AJAX将一些数据发送到PHP页面
检索结果并向用户显示一个带有弹出框的按钮，其中包含用于保存用户搜索名称的表单
通过其他AJAX

第1点和第2点工作正常。我把popover功能放在＆＃39;完成＆＃39; ajax的一部分，因为只在检索到结果后才创建popover。

对于第3点，我无法使用on.submit捕获最后一个表单。当我点击提交按钮时，它会发送表格（重新载入我的页面）。

这是我的代码：

HTML部分：

<body>
<div class="row" id="results"></div>
</body>

JS部分：

/* popover form for save search */
var search_box = '<div id="popover-content" class="hide">'+
                    '<form id="searchForm" class="form-inline" role="form">'+
                        '<div class="form-group has-warning">'+
                            '<input placeholder="Name" class="form-control" maxlength="50" type="text"> '+
                            '<button type="submit" class="btn btn-warning"><i class="fa fa-check"></i></button>'+                              
                        '</div>'+
                    '</form>'+
                '</div>';

/* function to retrieve results and show button with popover */
function searchresults() {              
    if(select_data !== ''){
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "search.php",
            data: { q: select_data },
            cache: false,
            success: function(data) {
                if($.isPlainObject(data) && data.state === 200){
                    // here is code to retrieve results...

                    // show button with popover and form
                    saveButton ='<button type="button" class="btn btn-outline btn-warning btn-lg" data-toggle="popover" data-placement="auto top" data-title="Enter name for your search"><i class="fa fa-star"></i> Save selection</button>'+search_box;
                    $("div#results").html(saveButton);  
                }
            },
            complete: function (jqXHR, status) {
                $("[data-toggle=popover]").popover({
                    html: true, 
                    content: function() {
                          return $('#popover-content').html();
                        }
                });

                /* ******** PART DOES NOT WORK ******** */
                $("#searchForm").on('submit', function(e) {
                    e.preventDefault();
                    alert('passed');
                   /* code ajax here */

                   return false;
                });
            }
        });
    }return false;
}

如何解决这个问题？

Answer 1

尝试添加$（文档）....让我知道它是否有效我没有测试

$(document).on('submit', 'form#yourFormID', function(e) {
   e.preventDefault();
   alert('passed');
   /* code ajax here */

   return false;
});

提交在AJAX响应中创建的表单

1 个答案: