Что не так с этим обработчиком событий JQuery?

Question

Извините, что я так часто пишу здесь - я проделал большую работу и, в свою очередь, столкнулся с множеством проблем.

Обработчик клика просто изменяет некоторые глобальные переменные и отправляет эти переменные, чтобы обновить страницу через Ajax. Вот мой Javascript: (обратите внимание, что функция getPosts работает, но, по-видимому, она не вызывается для .click ()).

если вы хотите просмотреть документы во плоти, перейдите на www.ethoma.com/testhome.php и для php перейдите на www.ethoma.com/getposts.php.

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, щелчок не будет прикреплен.Рекомендуется заключать весь код в событие ready

$(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.

Вам также придется исправить вызов setTimeout, как упоминает mplungjan.

Что касается стиля программирования, то неправильно передавать параметры в getPosts() в глобальных переменных.Почему бы просто не передать имя категории функции getPosts("etc.") напрямую и полностью избежать глобальной переменной категории?

Answer 3

Ваш клик назначен за пределами документа. Уже

Я бы сделал

$(document).ready(function() {
  getPosts();
  setTimeout(getPosts, 20000); // notice I removed the ()

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

});

Консоль Firefox даже сообщит вам об одной из ошибок, за исключением очень w3schools;)*

Ошибка: бесполезный вызов setTimeout (пропущены кавычки вокруг аргумента?)
Исходный файл: http://www.ethoma.com/testhome.php Строка: 39

Answer 4

$(function(){

        getPosts();


        setTimeout(function(){getPosts();}, 20000);

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

положить его в событие document.ready:)

Answer 5

Поместите это:

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

... внутри вашей функции готовности документа. Кроме того, вы не хотите вызывать getPosts в вызове для установки времени ожидания, просто передайте getPosts (без скобок).