Как применить события и эффекты к элементам, сгенерированным с помощью Ajax-запроса без определенного идентификатора?

Question

Я создаю форум и хочу, чтобы он работал как настольное приложение, поэтому я не обновляю страницу. Из-за отсутствия лучшего метода без еще одного полного Ajax-запроса я получаю количество страниц данных, доступных в Ajax-запросе. Мне нужно отобразить эти данные (как у меня на ethoma.com/testhome.php - я установил размер страницы 1 для тестирования), но мне также нужно добавить обработчики событий для каждого отображаемого номера, чтобы вызвать событие, которое изменится цвет текста и запуск Ajax-вызова для получения указанного номера страницы. Проблема для меня в том, что там может быть 500 страниц (конечно, тогда я не смог бы отобразить каждый номер страницы). Для тех, кто не хочет просматривать код на моем сайте, вот его важные части:

function getPosts() 
            {
                var queryString = "category=" + category + "&page=" + page + "&order=" + order;
                $.ajax(
                {
                    url: 'getposts.php',
                    data: queryString,
                    success: function(data)
                    {
                        var oldHtmlTemp;
                        var dataArray = data.split("%^&$;");
                        numpage = dataArray[0];
                        $('#postcontainer').html(dataArray[1]);
                        $('#enterpage').html('');
                        if (numpage != 0)
                        {
                            for(var i=1;i<=numpage;i++)
                            {
                                oldHtmlTemp = $('#enterpage').html();
                                $('#enterpage').html(oldHtmlTemp + "&emsp;" + i);
                            }
                            oldHtmlTemp = $('#enterpage').html();
                            $('#enterpage').html(oldHtmlTemp + "&emsp;");
                        }
                        else
                        {
                            $('#enterpage').html('No results for this query');
                        }
                    }
                });
            }

Если вам интересно, что делает .split (), php doc возвращает количество страниц, разделенных этой странной строкой, которую я обозначил. Я решил, что это будет самый простой способ поместить количество страниц в остальную часть текста сообщения.

В любом случае, как мне добавить обработчики событий к этим отдельным номерам?

У меня быстрый вопрос, по какой-то странной причине этот код не работает. Он добавляет обработчик событий на следующую страницу и кнопки предыдущей страницы, а также проверяет ошибки, чтобы убедиться, что вы не пытаетесь нажать на страницу -1.

$("#nextpage").click(function() 
            {
                if (page < numpage -1)
                {
                    page++;
                    getPosts();
                    alert(page);
                }
            });
            $("#prevpage").click(function() 
            {
                if (page >= 1);
                {
                    page--;
                    getPosts();
                    alert(page);
                }
            });

Оповещения для отладки. Также стоит отметить, что когда страница = 0, вы получаете страницу 1. Я имею в виду, что я считаю от 0 1 2, но пользователь видит 1 2 3.

Спасибо всем, кто просматривает / отвечает на этот пост.

Answer 1

Сначала я обращусь к последнему вопросу.Я не понял следующий вопрос, поскольку вы не указали, что именно не работает.Я предполагаю, что вы переопределяете ваши "next", "prev" при динамической загрузке нового HTML.Чтобы решить эту проблему, взгляните на "живой" метод jquery .То, что он делает, точно так же, как назначение «щелчка» (как вы сделали), но он переоценивает селектор для каждого события.Таким образом, новые элементы все еще будут включены.

Я считаю, что «живой» метод будет работать и по первому вопросу.Просто оберните каждое число каким-то «промежутком», идентифицированным уникальным «классом».и добавьте что-то вроде этого:

$(".pagination-number").live("click",function(){
$(".pagination-number").attr("color:black"); // remove previous click color
$(this).attr("color:red"); // mark currently clicked number
 .... // load the content
})

Когда я пишу HTML, который загружается динамически, я всегда назначаю Javascript этому HTML.Таким образом, я переоцениваю JS при загрузке нового HTML.

Например, мой возвращенный HTML выглядит примерно так:

<div class="highlight"> some content here </div>
<script> $(".highlight").effect("highlight",{},300)</script>

Преимущество, которое он дает мне, заключается в том, что я назначаю поведение данным.(как в ООП).Мне не нужно переписывать поведение при каждой загрузке HTML.(в этом примере для выделения текста).Он будет подсвечен каждый раз, когда я загружаю HTML, потому что скрипт проверяется.Вам следует подумать об использовании этого шаблона проектирования, так как он будет:

1. Сконцентрировать весь ваш код в одном месте
2. Этот шаблон проектирования преодолевает сценарии, в которых вы переопределяете объект dom.(например, старый HTML имеет кнопку #prev, а новый HTML также имеет кнопку #prev. Код всегда будет ссылаться на самый последний элемент dom, поэтому поведение будет согласованным.