Question

我最近一直在研究JQuery在个人网站上使用。我想要添加到网站的东西是博客预览功能，它使用AJAX和JSON来检索博客文章的标题和预览文本。当访问者单击博客选项卡时，JQuery将检索信息并以我希望的方式显示标题。标题应该是可点击的，因此当您单击标题时，将显示预览文本。在大多数情况下，我通过使用JQuery的.on（）函数来工作，但无论出于何种原因，只有其他所有标题都是可点击的。这是代码：

$(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);
    });

为了更直观地描述问题，如果我有8个正在预览的博客帖子，则每个博客的标题都会正确呈现，并隐藏内容。如果我尝试点击第一，第三，第五或第七个标题，则没有任何反应。如果我单击第二，第四，第六或第八个标题，将显示帖子预览。如果我再次点击它，它将被隐藏，正如我所期望的那样。

如果它引起任何混淆，blogContent是博客部分的jQuery选项卡引用的div的id。我非常感谢你能借给我的任何建议或智慧！

Answer 1

您无需将事件附加到每个人h3。

.on（）可以用来将一个函数附加到一个事件，无论是现在还是将来，它都匹配一个选择器（jQuery 1.7 +）。

尝试从每个循环（和函数）中取出.on（），通过style =“display：none;”隐藏p标记。并在函数后面放置：

$(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(); });

Answer 2

我建议你在每个陈述之外移动你的陈述。每个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();
            });
        });
    }
}

如果这是多次发生的事情，那么使用Jay概述的委托方法并在所有功能之外设置事件（除了document.ready），可以更好地服务。

JQuery .on（）只使每个其他元素附加可点击

2 个答案: