Calling jquery after Ajax load
I'm using AJAX to pull in a page into another page. The page I am pulling looks like so:
- <script type="text/javascript">
- $('#conditionslink').click(function () {
- var content = $(this).parent().parent().parent();
- content.find('#progConditions').toggle();
- var runnersheight = content.height() - content.find('#programHeaders').height();
- content.find('#runnersBox').height(runnersheight - 8);
- });
- </script>
- <div id="programHeaders" style="padding: 4px; text-align: center;">
- <a href="#" id="conditionslink" style="text-decoration: none;">Conditions</a>
- <div id="progConditions" style="display: none; padding: 3px;"></div>
- </div>
- <div id="runnersBox" style="overflow: auto;"></div>
The problem i'm getting is after I pull the fragment in a second time onto the page, though its put into another container. But the second instance is causing the first instance javascript to break. When it is on the page it looks like so:
- <div class="module" id="program123456789">
- <div class="header"></div>
- <div class="content">
- <div id="programHeaders" style="padding: 4px; text-align: center;">
- <a href="#" id="conditionslink" style="text-decoration: none;">Conditions</a>
- <div id="progConditions" style="display: none; padding: 3px;"></div>
- </div>
- <div id="runnersBox" style="overflow: auto;"></div>
- </div>
- </div>
And the second looks roughly the same with a different ID for the outer most div "module". I know my problem is related to the $('#conditionslink').click() and that its pulling the conditionslink of the first fragment and therefore causing that click event to fire twice. I suppose i'm looking for a way that i can be more specific about which conditionslink the script is talking to. Whether the answer is to put the script elsewhere or if i need script on my receiving page idk. I hope the latter is not the case as that page should really not need to know anything about the pages being pulled in. Sorry if this isn't as related to jQuery as it should be for this forum.