Question

I am dynamically creating a link, and I am trying to add a click function to it. The links are being added, but the click function is not working. I dont see anything in the console, nor do I get an alert.

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .click(function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

Answer 1

One of the most common mistakes with jQuery. When dynamically adding elements, normal jQuery event handlers don’t work, so you need to use .live() to be able to bind events to dynamic elements. This should work:

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .live("click", function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

Notice the use of .live("click", function() { ... }); there? That should solve your problem.