0

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

所以这是预期的页面加载顺序：index.html -> somepage.php -> 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 页面加载时所有内容都正确显示（带有提交按钮的小表单，所有其他 main-div 内容，所有内容都显示）。但是，提交按钮并没有调用submit.php脚本，这意味着我相信点击事件对应的jQuery代码没有被注册。

我对 jQuery 相当陌生。这与我在 jQuery .ready() 中“排序”代码的方式有关吗？与调用函数之前 DOM 未准备好有关，或者可能与 jQuery 中的 .load() 问题有关？

4

5 回答 5

2

正如大家所指出的，加载函数是异步工作的，因此您的点击处理程序不适用于“未来”的 div。

您可以像这样将处理程序绑定到未来元素：

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

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

于 2013-03-24T12:24:51.663 回答
2

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

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

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

  2. 用于on指示应将单击处理程序分配给页面上或将要出现的元素。

    $('#item-submit').on('click', function(){
    jsURL = $('#input').val();
    submit(jsURL);
});
于 2013-03-24T12:13:50.517 回答
2 
$(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);
      });
    }
});
  1. 不要引用文件
  2. load()是 的快捷方式$.ajax，它是异步的，因此#item-submit在附加事件处理程序时不存在，您需要一个委托的事件处理程序。
  3. 如果它确实是表单内的提交按钮，请确保您阻止默认操作，以便表单不会被提交。
于 2013-03-24T12:09:46.707 回答
2

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

成功绑定事件处理程序：

$("#main-div").load("http://www.someurl.com/somepage.php", function () {
    $('#item-submit').click(function () {
        jsURL = $('#input').val();
        submit(jsURL);
    });
});
于 2013-03-24T12:11:36.517 回答
2

尝试这个 ：

<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>
于 2013-03-24T12:28:00.210 回答