Question

I have an empty div class called result.

As I go along and type the search queries, the result div gets filled up with item ( uses jQuery ajax).

When I do,

$(".result").click(function(){
    alrert("click on whole result class captured")
});

I get the alert message. But when I do,

$(".item").click(function(){
    alert("click on single item captured")
});

I don’t get alert messages.
Why does this happen?
Is it because the item divs were inserted after the document was loaded?

Answer 1

Prefer using .on

$(document).on("click", ".item", function(){
    alert("click on single item captured");
});

Because your items are added dynamically.

click or bind("click") can’t be used for dynamically adding elements to DOM, because you will not attach your events “bindings”.

on("click") (live("click") deprecated) keeps attaching events “bindings” through DOM changes.