I'm trying to listen for clicks on the #top, but after loading php using jQuery it doesn't respond. I really hope somebody can help, since this is the only issue that couldn't be resolved by googling it.
Here's the jQuery/javascript:
function change(type, top, user){
var ec = $('.entries-container');
ec.load('load.php', {type: type, top: top, user: user});
}
$(document).ready(function(){
$('.load').on('click', function(event) {
event.preventDefault();
var type = $(this).data('type'),
top = '0';
$('#top').data("current", type);
change(type, top);
});
$('#top').on('click', function(event) {
event.preventDefault();
var data = $(this).data('current');
change(data, data);
});
$('#top').on('click', function() {
console.log('Yes');
});
});
And here's the output of the php page which is loaded:
echo '';
echo '';
echo '';
echo '';
echo 'Image
';
echo 'Votes: ' . $e['v_votes'] . '
';
echo 'Vote
';
Answer
I think the problem may be that the $(document).ready(function(){}); call will apply your click listeners to .load and #top classed/id'ed elements when the DOM is first made ready, but the .load and #top elements added by "load.php" aren't in the DOM at that point. How about abstracting your listeners into a reusable function? Something like this (revised with a completion handler):
function change(type, top, user){
var ec = $('.entries-container');
ec.load('load.php',
{type: type, top: top, user: user},
function() { add_click_handlers(); });
}
$(document).ready(function(){
add_click_handlers();
});
function add_click_handlers() {
$('.load').on('click', function(event) {
event.preventDefault();
var type = $(this).data('type'),
top = '0';
$('#top').data("current", type);
change(type, top);
});
$('#top').on('click', function(event) {
event.preventDefault();
var data = $(this).data('current');
change(data, data);
});
$('#top').on('click', function() {
console.log('Yes');
});
}
No comments:
Post a Comment