JQuery .on() making only every other element appended clickable - jquery-ui

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

Answer 2

I would suggest moving your on statement outside of the each statement. Per jQuery:
If new HTML is being injected into the page, select the elements and
attach event handlers after the new HTML is placed into the page. Or,
use delegated events to attach an event handler, as described next.
http://api.jquery.com/on/
So 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>" + data[i].blogBody + "</p>");
$("#blogContent .head").next().hide();
});
$("#blogContent .head").on("click", function() {
$(this).next().toggle();
});
});
}
}
If this is something that happens multiple times you would be better served using the delegated approach outlined by Jay and setting the event on they body outside of all functions (excepting document.ready).