AJAX problem in jQuery

[danielpataki]

Hi Everyone!

I don't think this is a hard question for all of you well versed in javascript and jQuery, but I seem to be having some problems.

I am building a forum and I am experienced in PHP, MySQL and even in jQuery now somewhat, but I have run into something I just can't seem to find the answer too. Here is a simple example which I think contains everything you need to know.

If I have 10 elements on a page, say 10 divs, and I want to hide the odd ones, I would just use $("div:odd").hide() and wrap it into the document.ready function. The page loads, the divs are hidden, awesome.

However, let's say that after the ten divs, there is a link which triggers an AJAX request and the return data is basically another 10 divs which get pasted under the ones already on the page.

What I would like to happen is that the script I wrote a paragraph ago kicks in and hides the odd divs automatically.

Now it makes sense that this does not happen, since it seems logical that when the page loads, the script parses the divs and hides stuff, so after I get the AJAX results it won't do it again. What IS weird to me is that the functions I defined don't work either, so if I define

$("div").click(function() {SOMETHING HERE})

it will work for the first set of elements, but not for the ones which are returned by the AJAX call.

Does anyone know what's going on here?

Thanks a lot!

[danielpataki]

I sort of solved my own problem, but I don't know if it's the ideal way to do things.

Basically I decided that I probably need to reattach everything, so that is what I did. Basically I put everything in functions. Instead of writing at the beginning:

$("div:odd").css("background", "#ffffcc")

I create a function for setting the initial properties. I call that function on document.ready and I also call it in the AJAX query. This way I don't need top paste all my code in there, just relatively small bits.

If anyone knows how to do this better, please drop me a line!

[hengzhe]

The first call to $("div").click(function() {SOMETHING HERE}),
will 'recognize' the first 10 div(because it DOES exist).
When this call is done,another 10 divs are fetched by AJAX call,they
are not attached event listener!So if you want let them respond to click(or other events),you should call something like $("div").click(function() {SOMETHING HERE}), again,after those divs
being injected into current page.

[danielpataki]

Hi!

Thanks for the input, I thought this was the case, but I hoped there was something easier. As I said in my reply earlier, jquery does have a function for this:

$("div").live("click", function() {SOMETHING HERE}) which work on divs added later, but still not perfect.

Anyways, thank you :)

[hengzhe]

If you are using something like innerHTML="..." to append those new divs,keep an eye on the memory leakage that may rise due to event handlers attached to those divs.You'b better call $(...).remove() before appending new divs.