jQuery .click() event not firing on link created with .load()

Question

The .click() event is firing if the menu is outside the id="content" (static HTML) but not working when the menu is inside the id="content" (dynamic HTML using .load()).

Click function:

$(document).ready(function () {
    $("a.type").click(function () {
        var type = $(this).data("id");
        $('#content').load("content.php?" + type);
    });
});

Menu link on header (click event works here):

<li><a data-id="1" class="type">Cars</a></li>
<li><a data-id="2" class="type">Houses</a></li>

.load() fills this (click event not working here):

<div id="content"></div>

Answer 1

Change from

$("a.type").click(function 

to

$("a.type").live('click', function 

Or, rather than live, you could also use $(document).on("click", "a.type", function(){}) if you are using jQuery 1.7+.