Question

I need to update a section on my site frequently using ajax, jquery, and php.

When the page first loads, it calls a javascript function that displays the content of that section. Then using json I check for updates and if there are results, calls the same function to display it.

Now inside the ajax content there are links like

<a href="news.php?id" class="ajaxpopup">title</a>

to call fancybox but instead of opening a popup, it opens the page directly.
If the link to call fancybox is not inside an ajax content it displays properly.
I know that there are some people with the same problem but the answers are for divs with specific id.
How can I set it globally. I mean to work on links with class=”ajaxpopup”?

this is my function to call the content

$(document).ready(function() {
  $(".ajaxpopup").fancybox({
    'overlayColor'      : '#000000', 
    'centerOnScroll'    : true,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'modal'             : true
  }); 
});

function update(page,value)    {
  var data = 'id='+value;
  $.ajax({
    url: page,
    type: "POST",       
    data: data,     
    cache: false,
    success: function (html) {  
      $('#updates').html(html);   
      $('#updates').fadeIn(200);      
    }       
  });
}

then the divs

Answer 1

After loading the dynamic content, bind the fancy box again

 div.load("myserverpage.aspx?mode=popularmodels", { symbol: $("#txtSymbol").val() }, function() {
                $(this).fadeIn(100);

                $(".ajaxpopup").fancybox({
                    'scrolling': 'no',
                    'titleShow': true,
                    'titlePosition': 'over',
                    'onClosed': function () {
                        $("#login_error").hide();
                    }
                });
            });