Question

我有一个index.html页面，使用jquery调用驻留在同一站点内的somepage.php来加载此index.html页面的内容。

所以这是预期的页面加载顺序： index.html - ＆gt; somepage.php - ＆gt; submit.php（如果单击提交按钮）

index.html只有“main-div”，没有内容。当调用somepage.php时，通过运行php脚本加载“main-div”内容。 main-div包含一个带有提交按钮的小表单的子div。使用jQuery，我看到是否单击了提交按钮，单击时，将调用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>

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

我对jQuery很新。这与我如何“命令”jQuery .ready（）中的代码有关吗？在调用函数之前，DOM没有准备就绪，或者jQuery中的.load（）可能存在问题？

Answer 1

$(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不存在，您需要一个委托的事件处理程序。
如果它确实是表单中的提交按钮，请确保您阻止默认操作，以便表单不会被提交。

Answer 2

load函数异步工作。当您尝试绑定事件处理程序时，代码#item-submit尚未存在。

将事件处理程序绑定到成功：

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

Answer 3

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

指定加载的成功处理程序。

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

使用on表示应将点击处理程序分配给页面上或将在页面上的元素。

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

Answer 4

正如所有人指出的那样，加载功能异步工作，因此，您的点击处理程序不适用于未来＆＃39;格。

您可以将处理程序绑定到以下元素：

$(document).on('click', '#item-submit', function(event){
          jsURL = $('#input').val();
          submit(jsURL);  
});

这样你就可以在jQuery文档就绪函数中绑定你的处理程序。

Answer 5

试试这个：

<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>

使用加载函数后，jquery表单提交不起作用

5 个答案: