First off, $(document).ready() only fires once. When the document is first ready.
Second, if you have events on a dom object, and create an identical dom object, you need to reattach the events to this new dom object when it's created (or really, whenever) for the events to fire.
I don't even really know what you're trying to accomplish with $(document).bind("load",etc...);
Just use
$(document).ready(function(){
code you want to happen on page load
});
On 8/15/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/
_______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
