JQuery .on () делает кликабельным только каждый второй элемент - PullRequest
Новая
       16

JQuery .on () делает кликабельным только каждый второй элемент

2 голосов
/ 13 марта 2012

Я только недавно изучал JQuery для использования на личном веб-сайте.Что-то, что я хотел добавить к веб-сайту, было функцией предварительного просмотра блога, которая использует AJAX и JSON для получения заголовка и предварительного просмотра текста сообщения в блоге.Когда посетитель нажимает на вкладку блога, JQuery извлекает информацию и отображает заголовки так, как я хочу.Заголовки должны быть кликабельными, поэтому при щелчке по заголовку отображается текст предварительного просмотра.По большей части у меня это работает с помощью функции .on () JQuery, однако по любой причине кликабелен только любой другой заголовок.Вот код: 

$(document).ready(function() {

        function handleSelect(event, tab) {
            if (tab.index == 1) {
                $("#blogContent").empty();
                $.getJSON("/TimWeb/blogPreview", function(data) {
                    $.each(data, function(i) {
                        $("#blogContent").append("<h3 class=head>" +
                                data[i].blogTitle + "</h3>" +
                                "<p>" + data[i].blogBody + "</p>");

                        $("#blogContent .head").on("click", function() {
                            $(this).next().toggle();
                        }).next().hide();

                    });
                });
            }
        }

        var tabOpts = {
                select:handleSelect
        };

        $(".tabs").tabs(tabOpts);
    });

Для более наглядного описания проблемы, если у меня есть восемь предварительно просматриваемых постов в блоге, заголовок для каждого будет отображаться соответствующим образом, со скрытым содержимым.Если я попытаюсь щелкнуть первый, третий, пятый или седьмой заголовок, ничего не произойдет.Если я нажму второй, четвертый, шестой или восьмой заголовки, появится предварительный просмотр.Если я щелкну по нему еще раз, он будет скрыт, как я и ожидаю.

В случае возникновения путаницы, blogContent является идентификатором div, на который ссылается вкладка jQuery для раздела блога.Буду очень признателен за любой совет или мудрость, которые вы мне можете дать!

Ответы [ 2 ]

3 голосов
/ 13 марта 2012

Вам не нужно прикреплять событие к каждому отдельному h3.

.on () может использоваться для присоединения функции к событию для всего, как сейчас, так и в будущем, соответствующего селектору (jQuery 1.7 +).

Попробуйте извлечь .on () из каждого цикла (и функции), скрыть тег p с помощью style = "display: none;" и поместите это после функции: 

$(document).on("click", "#blogContent .head", function(){ $(this).next().toggle(); });

Примерно так: 

    function handleSelect(event, tab) {
        if (tab.index == 1) {
            $("#blogContent").empty();
            $.getJSON("/TimWeb/blogPreview", function(data) {
                $.each(data, function(i) {
                    $("#blogContent").append("<h3 class=head>" +
                            data[i].blogTitle + "</h3>" +
                            "<p style='display:none;'>" + data[i].blogBody + "</p>");
                });
            });
        }
    }

    // This only needs to be executed once.
    $(document).on("click", "#blogContent .head", function(){ $(this).next().toggle(); });
0 голосов
/ 13 марта 2012

Я бы предложил перенести ваше заявление за пределы каждого утверждения.По jQuery:

Если на страницу внедряется новый HTML, выберите элементы и прикрепите обработчики событий после размещения нового HTML на странице.Или используйте делегированные события для присоединения обработчика событий, как описано далее.

http://api.jquery.com/on/

Так что-то вроде этого: 

function handleSelect(event, tab) {
    if (tab.index == 1) {
        $("#blogContent").empty();
        $.getJSON("/TimWeb/blogPreview", function(data) {
            $.each(data, function(i) {
                $("#blogContent").append("<h3 class=head>" +
                        data[i].blogTitle + "</h3>" +
                        "<p>" + data[i].blogBody + "</p>");

                $("#blogContent .head").next().hide();
            });

            $("#blogContent .head").on("click", function() {
                    $(this).next().toggle();
            });
        });
    }
}

Если этото, что происходит несколько раз, вам лучше будет использовать делегированный подход, описанный Джеем, и установку события в их теле вне всех функций (за исключением document.ready).

...