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

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

php jquery ajax forms

Php 提交在AJAX响应中创建的表单,php,jquery,ajax,forms,Php,Jquery,Ajax,Forms,我有3个步骤要做：通过AJAX将一些数据发送到PHP页面检索结果并向用户显示一个带有popover的按钮，该按钮包含保存用户搜索名称的表单通过其他AJAX在其他PHP页面中发送此表单第1点和第2点很好。我将popover函数放在ajax的“complete”部分，因为只有在检索结果之后才能创建popover 对于第3点，我无法捕获on.submit的最后一个表单。当我点击submit按钮时，它会将表单重新加载发送到我的页面这是我的密码： HTML部分： <body> &l

我有3个步骤要做：

通过AJAX将一些数据发送到PHP页面检索结果并向用户显示一个带有popover的按钮，该按钮包含保存用户搜索名称的表单通过其他AJAX在其他PHP页面中发送此表单第1点和第2点很好。我将popover函数放在ajax的“complete”部分，因为只有在检索结果之后才能创建popover

对于第3点，我无法捕获on.submit的最后一个表单。当我点击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;
}

如何更正此问题？

尝试添加$document。。。。让我知道它是否有效我没有测试

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

   return false;
});

为什么要将搜索框动态添加到DOM中？它不包含AJAX响应中的任何内容，因此您应该能够将其放入原始HTML中，用CSS隐藏，然后在AJAX返回时显示。是否可能有多个id=searchForm的元素？ID应该是唯一的，$searchForm将只选择第一个。不，我只有一个searchForm。我已经动态添加了搜索框，因为它需要在divresults中定位，如果用户搜索没有结果，这个DIV的内容将被清空，使用$divresults.html；如果要显示的结果和搜索表单有单独的div，则更好，这样显示结果不会删除表单。处理程序应该位于$document.ready函数的顶层。在成功函数将表单添加到DOM后，他将绑定处理程序。他不需要使用委托。如果你这样做，你不应该在完整的回调中运行它，你应该在$document.ready中运行一次。否则，在提交表单时会收到多个AJAX调用。