I have a javascript files that is suppose to interact with the response of my ajax request but apparently the javascript can't read the response from the ajax request.
What I'm asking is, how can I make my jquery plugin read the class in the response of my ajax request?
This is how my script looks without ajax:
<body>
<div id="main_content">
<!--this is where the ajax is returning the info-->
</div>
</body>
<body>
<div id="main_event_saff">
<!--this is an example of the ajax returns-->
<table>
<tbody>
<tr>
<td class="header">Header</td>
</tr>
<tr>
<td class="data">Data</td>
</tr>
</tbody>
</table>
</div>
</body>
Ajax file:
$(document).ready( function rankings(callback){
$.ajax({
url: 'ajax/rankings.php',
type: 'GET',
success: function(response){
$('#main_event_saff').html(response);
}
});
});
Here's the plugin that I want to read the response of the ajax request:
$(document).ready(function () {
$(".data").hide();
$(".header").click(function () {
$(this).next(".data").slideToggle(200);
});
});
This doesn't work because it can't read the ajax request
just like the page source it only see's