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/

Reply via email to