jQuery, <div> loading itself using generated links that are clickable more than once

Question

I got following problem: I generate a div with "jQuery-Load" links. Theese links inside the div should reload the same div with different parameters. I found a working solution, which generates theese links, which are clickable and... ...trigger the chosen event once. So clicking the same link inside the generated div, after it has been regenerated, doesnt work anymore. Tried a lot of things...

It looks like that now:

<a href="?#id123c" id="l0" onclick="$('#aaa0').load('getdetails.php?fNumber=36&amp;env=fun&id=10,function(data){ $('#aaa0').click(function(e) { e.preventDefault(); }); });"> click </a>

<div id="aaa0"> I'm the div - level1! </div>

div gets filled - beautyful.

It now contains this: (actually its generated what is why wrote [time] wich is time(); generated in php. as a changing parameter

[...]<a href='?#intern0[time]"' id='li0' onclick=\"$('#aaa0').load('getdetails.php?fNumber=36&env=fun&time=[time]');\"> Link inside Updated Div </a>[...]

when i click the link inside the div it works. when i click it again, it wont... I want to generate a nice 'click deeper inside the data'-thing, which would be amazing getting this thing work and is the reason why everything must be as best as possible inside the "onclick" event :|

Sorry btw. for the a bit confusing post-style, its a confusing topic, and im not native speaking :)

Thanks for any help or hint in advance,

Harry

Answer 1

something like that should work:

<a href="?#id123c" id="l0"> click </a>
<div id="aaa0"> I'm the div - level1! </div>

<script>
$('a').live('click', function (e) {
    e.preventDefault();
    var id = this.id;
    $(this).next('div').load('getdetails.php?fNumber=36&env=fun&id=' + id);
});
</script>

basically, what is done is a generic rule, which gives all tags the same behavior. (load next div content). ".live()" is used so that loaded tags work (check the jquery documentation for .live(), or event delegation in general).

I'm not certain about the preventDefault stuff. You might want to use somehting else than tag for the link.

Answer 2

Maybe you're missing the concepts between bind and live. In bind, jQuery scans the document and attach a function direct to the element. In live, jQuery attach the function to the document, along with the event and the element as parameters. Once a event bubbles, jQuery check the event and the element, and if it match, then a function executes.

After the first run, the dom has changed, and its gonna work using live.

Answer 3

 <a href="?#123c" id="l0" onclick="$('#aaa0').load('getdetails.php?fNumber=36&amp;env=fun&amp;id=0',function(data){ $('#aaa0').click(function(e) { e.preventDefault(); }); });"> click </a>

made the day :) I don't know exactly why, but maybe its possible preventDefault made the bind and live thing for me. Its working fine, so ...

thanks for the hints! :D