这个JQuery事件处理程序有什么问题

Question

很抱歉，我经常在这里发帖——我做了很多工作，却遇到了很多问题。

点击处理程序只是修改一些全局变量，并通过Ajax发送这些变量来更新页面。这是我的Javascript：(请注意，getPosts函数正在工作，但可能没有在.click((上调用它(。

如果您想查看这些文档，请访问www.ethma.com/testhome.php，对于php，请访问http://www.ethma.com/getposts.hp.

var category = "undefined";
var page = 0;
var order="id";
function getPosts(){
            var queryString = "category=" + category + "&page=" + page + "&order=" + order;
            $.ajax({
                url: 'getposts.php',
                data: queryString,
                success: function(data) {
                $('#postcontainer').html(data);
                 }
            });
        }
$(document).ready(function() {
            getPosts();
         });
         setTimeout(getPosts(), 20000);
         $("#all").click(function(){
                category = "etc.";
                getPosts(); 
            });

Answer 1

您的点击事件在$(document).ready之外，因此如果javascript在加载元素#all之前运行，则不会附加点击。将所有代码封装在就绪事件中是一种很好的做法

$(document).ready(function() {
    var category = "undefined";
    var page = 0;
    var order = "id";
    function getPosts() {
        var queryString = "category=" + category + "&page=" + page + "&order=" + order;
        $.ajax({
            url: 'getposts.php',
            data: queryString,
            success: function(data) {
                $('#postcontainer').html(data);
            }
        });
    }
    getPosts();
    setTimeout(getPosts(), 20000);
    $("#all").click(function() {
        category = "etc.";
        getPosts();
    });
});

或者，您可以使用live函数将事件绑定到所有匹配元素，无论这些元素是现在出现还是稍后出现在执行过程中。只需将$("#all").click(function更改为$("#all").live('click', function

Answer 2

放入这段代码：

    $("#all").click(function(){
            category = "etc.";
            getPosts(); 
        });

在$(document).ready函数中，以便在页面加载并且对象#all存在后安装单击处理程序。

您还必须修复mplungjan提到的对setTimeout的调用。

至于编程风格，在全局变量中将参数传递给getPosts()是一种糟糕的形式。为什么不直接将类别名称传递给getPosts("etc.")函数，并完全避免全局类别变量？

Answer 3

您的点击被分配到文档之外。准备

我会做

$(document).ready(function() {
  getPosts();
  setTimeout(getPosts, 20000); // notice I removed the ()
  $("#all").click(function(){
    category = "etc.";
    getPosts(); 
  });
});

火狐控制台甚至告诉你一个错误，除了以一种非常w3chools的方式；(

错误：无用的setTimeout调用(参数周围缺少引号？(
源文件：http://www.ethoma.com/testhome.php线路：39

Answer 4

放这个：

 $("#all").click(function(){
            category = "etc.";
            getPosts(); 
        });

在您的文档准备功能中。此外，您不想在调用中调用getPosts来设置超时，只需传递getPosts(无括号(即可。

Answer 5

$(function(){
        getPosts();

        setTimeout(function(){getPosts();}, 20000);
        $("#all").click(function(){
              category = "etc.";
              getPosts(); 
        });
});

将其放入document.ready事件：(