jquery-ui - JQuery .on() 仅使附加的所有其他元素可单击

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

为了更直观地描述问题，如果我正在预览八篇博客文章，则每篇文章的标题将适当呈现，同时隐藏内容。如果我尝试单击第一个、第三个、第五个或第七个标题，则什么也不会发生。如果我单击第二个、第四个、第六个或第八个标题，则会出现帖子预览。如果我再次单击它，它将被隐藏，正如我所期望的那样。

以防引起任何混淆，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(); });