Question

I have a simple script that closes a DIV. An example is here: http://jsfiddle.net/22fTm/3/

My problem however, is that the DIV “box” is only produced after an ajax call, which is part of a search php script.

Any idea what I need to make this work? Similar question: How to hide an element on an AJAX call?

Answer 1

Since the element is created dynamically you have to use on or delegate which take care of triggering the event even when the elements are added dynamically.

Using on

$(function(){
    $(document).on("click", "div.box a.close", function() {
        $(this).parent("div.box").fadeOut();
    });
});

on() reference: http://api.jquery.com/on/ JQuery ver 1.7+

Demo

Using delegate

$(function(){
    $(document).delegate("div.box a.close", "click", function() {
        $(this).parent("div.box").fadeOut();
    });
});

delegate() reference: http://api.jquery.com/delegate/

Demo