HTML added to DOM after ajax call cannot access other functions

I have the following function in jquery

$(document).ready(function () {
     $("div.div_prod_thumb").click(function() {
          alert("HERE");
     });
});

Open in new window

When the page initially loads, there are a number of "div_prod_thumb" divs on the page. Clicking on one of those divs yields the alert box, just as it should.

Then, I have this filter function:

$(document).ready(function () {
     $("div.div_prod_thumb").click(function() {
          alert("HERE");
     });

     $(".filter_checkbox").click(function () {
          var filterId = $(this).val();
          var params = "{ filterId: '" + filterId + "' }";

          $.ajax({
            type: "POST",
            url: "Services/WebService.asmx/DisplayProduct",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (arg) {
                $("#prod-display-table tr").each(function () {
                        $(this).remove();
                });
                $("#first-row").after(arg.d);
            }
        });
     });
});

Open in new window

Basically what's happening in the 2nd function is that there are filters on the page. When someone selects a filter, a Web Service is called that returns new HTML (in "arg.d") to be displayed on the page. The HTML can return any number of "div_prod_thumb" divs to be displayed on the page.

However, when a filter is applied and I click on a "div_prod_thumb" div from HTML that was generated by the ajax call, the $("div.div_prod_thumb").click(function() { ... }); function does not get called.

How do I do it so both the initial HTML and any new HTML put on the page can access this function? I tried doing .live("click", function...) but that did not work either.
infotechelgAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Change like so

$(document).ready(function () {
     $("body").on("click","div.div_prod_thumb",function() {
          alert("HERE");
     });
}); 

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
infotechelgAuthor Commented:
Beautiful. Works like a charm. Much appreciated!

Could you explain why this works and the other does not?
0
GaryCommented:
Dynamic elements do not exist in the DOM, using .on tells jquery to attach the event to these dynamic elements as they are created/added to the page.
0
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

infotechelgAuthor Commented:
Dynamic elements do not exist in the DOM, using .on tells jquery to attach the event to these dynamic elements as they are created/added to the page.

Interesting. Then how come the following doesn't work:

$(document).ready(function () {
     $("div.div_prod_thumb").on("click",function() {
          alert("HERE");
     });
}); 

Open in new window

Why do you have to use "body" instead?
0
GaryCommented:
You have to attach it to an element that exists at load (in the DOM), since every web page should have a body tag then it is the easiest one to attach to.
0
infotechelgAuthor Commented:
makes perfect sense. Thanks, Gary! I apprecaite your insight and help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.