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>

The events have already been bound before the data is loaded through AJAX. Jake Feasel's answer should fix it, but just thought you might want to know why it's happening. — Corbin
– Corbin, Commented Dec 21, 2011 at 22:53

Jake Feasel · Accepted Answer · 2011-12-21 23:06:12Z

8

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+.

edited Dec 21, 2011 at 23:06

answered Dec 21, 2011 at 22:52

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

James Allardice Over a year ago

live is deprecated in jQuery 1.7+ and should not be used (use on instead). Even before 1.7, delegate should be used instead.

Manu Clementz Over a year ago

I think that the docs now recommend to use on (jquery 1.7+) or delegate (previous versions) rather than live.

James Allardice Over a year ago

@JakeFeasel - As mentioned, even before 1.7 live is not recommended. Use delegate instead.

James Allardice Over a year ago

Also note that your on example won't solve the problem. It's equivalent to .click. You would need to bind the event handler to an ancestor element, and use the 2nd argument of on as a selector (in this case a.type). The same applies for delegate.

Jake Feasel Over a year ago

I've fixed it to reflect your point, @JamesAllardice. Thanks for the tip.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related