After .load(), other .load()'s evaluate multiple times
Best title I could come up with.
I have a dive with multiple links in it, when one of them gets clicked, jQuery will .load() an external page using data passed along from whichever link was clicked.
In this new .load()ed page, there are other .load()'s (different classes and ids than the original ones).
If this is the first time I .load()ed from the first set, and then click a .load() from the new data, the new .load() will only happen once.
If I .load() another link from the original list and click one of the new .load()s it will .load() twice.
If I .load() from the original list a third time, and then click a .load() that was just created, it will load three times.
This keeps increasing, forever and ever.
I just want to be able to .load() from the original set and click a load() in the new div and have it only run once. Every time. I figure it has something to do with the fact that I am creating a new DOM element every time I run the original .load(). I tried to .remove() the <div> before loading the page from the original .load(), but that clearly won't work since the <div> is now gone and there is no where for the content to go.
I checked in FireBug and it's calling my calculate.php file multiple times depending on what number click I'm on.
Any suggestions?
First Page:
- <table>
<tr><td class="sideSortableLeft"><span class="dynamicLinkSideSchol" title="1">Item 1</span></td><td>Information 1</td></tr>
<tr><td class="sideSortableLeft"><span class="dynamicLinkSideSchol" title="2">Item 2</span></td><td>Information 2</td></tr>
<tr><td class="sideSortableLeft"><span class="dynamicLinkSideSchol" title="3">Item 3</span></td><td>Information 3</td></tr>
</table>
- <div id="loading"></div>
- <div id="dynamicContent"></div>
- <script type="text/JavaScript">
- $('.dynamicLinkSideSchol').click(function() {
$('#loading').show();
$('#dynamicContent').load("view.php", { id : this.title }, function() {
$('#loading').hide();
});
});
- </script>
view.php
- <div class="calculation" style="display: none"></div>
- <table>
- <tr id="g-11111111"><td><span class="11111111-name">Tom Harris</span></td><td><span title="11111111">DETAILS</span></td><td><span class="good" title="11111111">NOMINATE</span></td></tr>
- <tr id="g-22222222"><td><span class="22222222-name">John Doe</span></td><td><span title="22222222">DETAILS</span></td><td><span class="good" title="22222222">NOMINATE</span></td></tr>
- <tr id="g-33333333"><td><span class="33333333-name">Julia Denn</span></td><td><span title="33333333">DETAILS</span></td><td><span class="good" title="33333333">NOMINATE</span></td></tr>
<table>
- <table id="left"></table>
- <script type="text/JavaScript">
$('.good').live("click", function() {
var os = this.title;
var id = "7";
var name = $('.' + os + '-name').text();
$('#g-' + osis).fadeOut('slow', function() {
$('.calculation').load("calculate.php", { id : id, osis : osis, action : "nom" }, function() {
$('#left').append("<tr><td><span class=\"good\">hello</span></td></tr>");
});
});
});
</script>