Question

I’ve just recently been studying JQuery to use on a personal website. Something I wanted to add to the website was a blog preview feature, which uses AJAX and JSON to retrieve the title and preview text of a blog post. When a visitor clicks the blog tab, JQuery retrieves the information and is displaying the titles the way I want it to. The titles are supposed to be clickable, so that when you click a title the preview text is shown. For the most part I have this working by using JQuery’s .on() function, however for whatever reason only every other title is clickable. Here is the code:

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

For a more visual description of the problem, if I have eight blog posts that are being previewed, the title for each will be rendered appropriately, with the content hidden. If I try clicking the first, third, fifth, or seventh title, nothing happens. If I click the second, fourth, sixth, or eighth titles, the post preview will appear. If I click it again, it will be hidden, as I expect it to be.

In case it causes any confusion, blogContent is the id of the div referenced by the jQuery tab for the blog section. I would greatly appreciate any advice or wisdom you could lend me!

Answer 1

You don’t need to attach the event to each individual h3.

.on() can be used to attach a function to an event for everything, both now and in the future, that match a selector (jQuery 1.7+).

Try taking the .on() out of the each loop (and the function), hide the p tag via style=”display:none;” and place this after the function:

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

Something like this:

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