Question

我一直在尝试使用.get（）函数练习jquery，但它不起作用。这是我的代码：

<html>
<head>
<title>Testing Site</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
        $(function() {
            $("#id").click(function(){  
                $('#hello').css('background-color', 'blue');
                $.get("test.php", function(data){
                    $('body')
                        .append( "Name: " + data.name )
                        .append( "Time: " + data.time ); 

                    $('body').css('background-color', 'red');
                }, "json");
            });
        });
</script>   
</head>
<body>
<span id="hello">Hello World!</span>
<input type="button" id="id" value="Click Here"></input>
</body>
</html>

我基本上修改了jquery api站点上的.get（）示例。但是当我点击按钮时没有任何反应！（一定有什么不对，因为背景颜色也没有改变......）我有正确的路径名，我复制了正确的php文件：

<?php echo json_encode(array("name"=>"John","time"=>"2pm")); 
?>

我也尝试在http://www.chazzuka.com/ajaxify-your-web-pages-using-jquery-88/上实现一个使用.get（）的例子，该例子不起作用。在Firefox上没有任何反应，在谷歌Chrome上它只是部分工作... 我不确定是否有人愿意尝试实现该代码，但该代码让我对这个.get（）函数感到疑惑：它是如何工作的？在该示例中，它应该从普通的html文件中检索信息。我认为它只适用于像php文件这样的东西，当你拨打电话“echo ...”时，服务器会发回信息。

Answer 1

由于您的代码位于页面的头部，因此它将在创建DOM之前执行。您需要让代码等待，直到DOM准备就绪。您可以通过将代码包装在document.ready中来实现此目的：

$(function(){

// code goes here

});

Answer 2

问题是脚本甚至没有被调用，因为绑定发生在页面完全加载之前。

您需要将代码包装在

中

$(document).ready(function() {
    // your code
});

块。

Check out the jQuery website for more on .ready

Answer 3

你不是在等待DOM准备好了。当您的代码运行时，$("#id")不会返回任何内容，因为尚未加载该div。

将您的代码包裹在$(document).ready(function(){})：

中

$(document).ready(function(){
    $("#id").click(function(){  
        $('#hello').css('background-color', 'blue');
        $.get("test.php",
            function(data){
                $('body').append( "Name: " + data.name )
                    .append( "Time: " + data.time )
                    .css('background-color', 'red');
            }, "json");
    });
});

Answer 4

您需要将click事件绑定放在jQuery的document ready事件中。使用当前代码，当您尝试将click事件绑定到#id元素时，DOM中尚未提供#id，因此jQuery无法找到该元素。

试试这个：

$(function(){
    $("#id").click(function(){  
                $('#hello').css('background-color', 'blue');
                $.get("test.php",
                    function(data){
                        $('body').append( "Name: " + data.name )
                        .append( "Time: " + data.time ); 
                        $('body').css('background-color', 'red');
                    }, "json");
            });
});

Answer 5

您的脚本在元素存在之前执行。

将<script>移至<body>的末尾。

Answer 6

将代码包装在$(function(){ })中，因为jQuery可以使用该元素来附加事件处理程序。这将在DOM准备就绪时执行代码。

$(function(){
        $("#id").click(function(){  
            $('#hello').css('background-color', 'blue');
            $.get("test.php",
                function(data){
                    $('body').append( "Name: " + data.name )
                    .append( "Time: " + data.time ); 
                    $('body').css('background-color', 'red');
                }, "json");
        });
});

Answer 7

Javascript在文档中执行。您希望使用jQuery的ready函数让您的脚本等待DOM准备就绪。

$(document).ready(function(){
    // Code to execute
});

或者使用快捷方式（功能与上面完全相同）。

$(function(){
    // Code to execute
});

Answer 8

您需要将事件处理程序放在$(document).ready(function() {});中并使用backgroundColor而不是background-color。在Javascript中，CSS键中没有“ - ”，而是将它们一起写在第二个单词中，如backgroundColor或textShadow;）

$(document).ready(function() {
    $("#id").click(function(){
        $('#hello').css('backgroundColor', 'blue');
        $.get("test.php",
            function(data){
                $('body').append( "Name: " + data.name )
                .append( "Time: " + data.time ); 
                $('body').css('backgroundColor', 'red');
            }, "json");
    });
});

应该工作（未经测试）

#id - 元素是嵌入在网站中，还是后加载了Ajax？如果是这样，您必须使用以下代码：

$(document).ready(function() {
    $("#id").live({
        click: function(){
            $('#hello').css('backgroundColor', 'blue');
            $.get("test.php",
                function(data){
                    $('body').append( "Name: " + data.name )
                    .append( "Time: " + data.time ); 
                    $('body').css('backgroundColor', 'red');
                }, 
                "json"
            );
        }
    });
});

让jquery中的.get（）工作

8 个答案: