Hi Jason,
I had the same trouble recently - I solved it by using find() in the
function after using load().
Here's what I did:
<script type="text/javascript">
$(document).ready(function(){ // Gets everything set up on page load
$("#searchbutton").click(function(){
// Search button has been clicked - let's do some AJAX, baby!
$("#animal_table").load("/includes/catalogue/getlots.php",{
start: "0", // pass static values
year: "<?php echo $thispage['year']; ?>", // pass PHP variables
sire_id: document.getElementById("sire_id").value
// or pass element values from a form field or similar
},function(){
// search for new "a" elements after .load
// is called so loaded stuff can be clicked,
// as stuff loaded this way has no event handlers attached
$("#animal_table").find("a").click(function(){
$("#animal_detail").load("/includes/catalogue/showdetail.php",{
lot_id: this.id // pass the ID of whatever link is
clicked
});
return false; // so the link doesn't actually load a
new page
});
});
});
});
</script>
And wrote about it here if you want to read more:
http://www.waterfallweb.net/archives/2006/08/ahah-its-jquery/
Cheers
Jason
On 16/08/06, Jason Huck <[EMAIL PROTECTED]> wrote:
>
> Taking my first real stab at jquery, and can't get around what I expect is a
> common problem:
>
> I have a table to which the user can add/remove rows. The data in the table
> is also periodically refreshed. All my functions work on their own, but
> after the first add/refresh, my deletes stop working.
>
> >From what I've read, it appears that the dynamically updated elements lose
> their binding to my jquery function, but even though i've liberally
> sprinkled $(document).ready() throughout my code in hopes of re-attaching
> them, I've had no luck so far.
>
> Here's the js I have so far:
>
> <script type="text/javascript">
> $(document).bind("load", function(){
> $("#addsymbolform").bind("submit",function(){
> var newSymbols =
> document.getElementById('newsymbol').value;
> document.getElementById('newsymbol').value = '';
>
> if(newSymbols.length > 0) {
> $("tbody#stocks").load('/myurlwithparams');
> $(document).ready();
> }
>
> return false;
> });
>
>
> var stocktimer = setInterval(function(){
> $("tbody#stocks").load('/myurlwithparams');
> $(document).ready();
> }, 30000);
>
>
> $("a.remsymbtn").click(function(){
> var symid = "a#" + this.id + "id";
> var symname = $(symid).html();
> $(("tr#" + this.id + "row")).hide("slow");
> $.get('/myurlwithparams' + symname);
> $(document).ready();
> return false;
> });
>
> $(document).ready();
> });
> </script>
>
>
> ...And here's an example of the rendered HTML that I'm swapping about (just
> the stuff inside the table body):
>
>
> <table width="100%" border="0" cellspacing="0" cellpadding="0">
> <tbody id="stocks">
> <tr id="sym1row">
> <td>
> #
> delete.gif
>
> </td>
> <td> /somewhere/?s=AAPL AAPL </td>
> <td>65.75</td>
> <td>+1.81</td>
> </tr>
> <tr id="sym2row">
> <td>
> #
> delete.gif
>
> </td>
> <td> /somewhere/?s=CSCO CSCO </td>
> <td>20.56</td>
> <td>+0.47</td>
> </tr>
> </tbody>
> </table>
>
> I even tried stuffing a $(document).ready(); into the returned content, but
> it didn't help.
>
> Any suggestions greatly appreciated!
>
>
> Thanks,
> Jason
>
>
> p.s., as an aside, I did have some transitions around the functions, i.e.,
> hide/show and slideUp/slideDown on the add/refresh functions, but they
> really messed with the display, in every browser I tried.
>
>
> --
> View this message in context:
> http://www.nabble.com/replaced-content-losing-it%27s-%27binding%27-tf2109860.html#a5816505
> Sent from the JQuery forum at Nabble.com.
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
--
Jason Foss
http://www.almost-anything.com.au
http://www.waterfallweb.net
Windows Messenger: [EMAIL PROTECTED]
North Rockhampton, Queensland, Australia
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
