Php 使用load函数后，jquery表单提交不起作用_Php_Jquery_Dom

Php 使用load函数后，jquery表单提交不起作用

php jquery dom

Php 使用load函数后，jquery表单提交不起作用,php,jquery,dom,Php,Jquery,Dom,我有一个index.html页面，它使用jquery调用同一站点中的somepage.php来加载index.html页面的内容因此，这是预期的页面加载顺序： index.html->somepage.php->submit.php（如果单击了提交按钮） html只有“main div”，没有这样的内容。调用somepage.php时，通过运行php脚本加载“main div”内容。主div包含一个子div，其中包含一个带有提交按钮的小表单。使用jQuery，我看到是否单击了submit按钮，

我有一个index.html页面，它使用jquery调用同一站点中的somepage.php来加载index.html页面的内容

因此，这是预期的页面加载顺序： index.html->somepage.php->submit.php（如果单击了提交按钮）

html只有“main div”，没有这样的内容。调用somepage.php时，通过运行php脚本加载“main div”内容。主div包含一个子div，其中包含一个带有提交按钮的小表单。使用jQuery，我看到是否单击了submit按钮，单击时，将调用submit.php脚本

这是基本代码：

<!DOCTYPE html>
<html>
<head>
        <script src="js/jquery.js"></script>
        <script>
            $('document').ready(function(){            

                $("#main-div").load("http://www.someurl.com/somepage.php");

                $('#item-submit').click(function(){
                    jsURL = $('#input').val();
                    submit(jsURL);

                });

                function submit(jsURL){
                    $.get(
                        'http://www.someurl.com/submit.php',    
                        {   item: jsURL   },
                        function(data){
                            if(data=="success")
                            {
                            $('#submit-status').html(data);
                            }
                            else
                            {
                            $('#submit-status').html(data);
                            }
                        }
                    );
                }


            });
        </script>

</head>
<body>

    <div id="main-div"> </div>

</body>
</html>


$（'document'）.ready（函数（）{
$（#主分区）加载http://www.someurl.com/somepage.php");
$（“#项目提交”）。单击（函数（）{
jsURL=$（'#input'）.val（）；
提交（jsURL）；
});
函数提交（jsURL）{
美元(
'http://www.someurl.com/submit.php',    
{item:jsURL}，
功能（数据）{
如果（数据=“成功”）
{
$（'#提交状态'）.html（数据）；
}
其他的
{
$（'#提交状态'）.html（数据）；
}
}
);
}
});

现在问题是：加载index.html页面时，所有内容都正确显示（带有submit按钮的小表单，所有其他主要div内容，所有内容都显示出来）。但是，submit按钮没有调用submit.php脚本，这意味着我认为与click事件对应的jQuery代码没有被注册

我对jQuery相当陌生。这与我如何在jQuery.ready（）中“排序”代码有关吗？在调用函数之前DOM没有准备好，或者jQuery中的.load（）有问题

$(document).ready(function(){            
    $("#main-div").load("http://www.someurl.com/somepage.php");

    $("#main-div").on('click', '#item-submit', function(e){
           e.preventDefault();
           var jsURL = $('#input').val();
           submit(jsURL);
    });

    function submit(jsURL){
      $.get('http://www.someurl.com/submit.php', {item: jsURL}, function(data){
           $('#submit-status').html(data);
      });
    }
});

不要引用文档

load（）

是

$.ajax

的快捷方式，并且它是异步的，因此当您附加事件处理程序时，

\item submit

不存在，您需要一个委托事件处理程序

如果它实际上是表单中的提交按钮，请确保阻止默认操作，以便表单不会被提交

该函数异步工作。使用代码

#当您尝试绑定事件处理程序时，item submit

还不存在

成功时绑定事件处理程序：

$("#main-div").load("http://www.someurl.com/somepage.php", function () {
    $('#item-submit').click(function () {
        jsURL = $('#input').val();
        submit(jsURL);
    });
});

load

异步加载数据，这意味着当您在提交按钮上分配单击处理程序时，按钮本身可能还不在页面上。要克服这一问题，您有两个选择：

指定加载的成功处理程序

$("#main-div").load("http://www.someurl.com/somepage.php", function(){
    $('#item-submit').click(function(){
            jsURL = $('#input').val();
            submit(jsURL);
        });
});

使用上的

指示应将单击处理程序分配给页面上的或将要出现的元素
$('#item-submit').on('click', function(){
    jsURL = $('#input').val();
    submit(jsURL);
});


正如所有人指出的，load函数异步工作，因此，您的单击处理程序不适用于“future”div
您可以将处理程序绑定到将来的元素，如下所示：
$(document).on('click', '#item-submit', function(event){
          jsURL = $('#input').val();
          submit(jsURL);  
});

通过这种方式，您可以在jQuery document ready函数中绑定处理程序。
尝试以下操作：
<script>
$(document).ready(function(){
        $("#main-div").load("http://www.someurl.com/somepage.php",function(){
        $("#main-div").on('click', '#item-submit', function(e){
           e.preventDefault();
           var jsURL = $('#input').attr('value');
           submit(jsURL);
        });
        });
});

function submit(jsURL){
                    $.ajax({
                    url:'http://www.someurl.com/submit.php',
                    type :'GET',
                    success: function(data){
                    $('#submit-status').html(data);
                    }
                    });

                }
</script>


$（文档）.ready（函数（）{
$（#主分区）加载http://www.someurl.com/somepage.php“，函数（）{
$（“#主分区”）。在（'单击'，'项目提交'，功能（e）{
e、 预防默认值（）；
var jsURL=$（'输入'）.attr（'值'）；
提交（jsURL）；
});
});
});
函数提交（jsURL）{
$.ajax({
网址：'http://www.someurl.com/submit.php',
类型：'GET'，
成功：功能（数据）{
$（'#提交状态'）.html（数据）；
}
});
}
html中的“#项目提交”在哪里，是否在返回的响应中？可以帮助you@MohamedAli-是的，item submit在somepage.php脚本返回的响应中。您可以引用文档
，这没关系。@MarcelKorpel-当然，它甚至可以使用引号，所以Sizzle可能会找到它，但事实上这很重要，因为删除引号将直接引用文档。或者使用速记$（function（）{
。谢谢，@Marcel Korpel和adeneo所有的回答都强调了同样的事情。也谢谢@Shuhel Ahmed。