This probably isn't a jquery question precisely, but jquery is being
used as my method for making ajax requests.
I'm running into a recurring problem where functions declared on the
initial page load aren't manipulating content loaded later via ajax.
For example, when the page loads I may have two ".button" elements but
then I pull in three more via ajax. A function that affects
that .button class will work on the original elements but not the ones
added via ajax.
Here is a very basic but functional example of this:
--------------------------------------------------
<script type="text/javascript">
$(function() {
$('p').click(function() {
$.ajax({
url : 'testing.html',
type: 'get',
success : function(data) {
$('.container').append(data);
}
});
});
});
</script>
<div class="container">
<p>Hello</p>
</div>
--------------------------------------------------
In this example, a click of any p tag should append the content from
testing.html onto the doc. testing.html is a fragment that has a
duplicate p tag. Well, I want every new p tag to have the same
behavior as the original one. How do I do that? I've found that
putting that writing that function into the fragment can solve the
problem but this isn't the sort of solution I'm looking for.
Sometimes, redeclaring the function in the success function will work
as well, but this is inelegant as I'd like any function declared in
the site js file to be available.
What is a good method for getting around this sort of trouble?
Thanks
