Question

I am writing some code to generate anchor elements via Ajax call to the server. The list is generated successfully. But when i tried to select the anchor element by it’s class, I retrieved nothing. Is there something wrong with my code? Any suggestions? I appreciate all your feedback. Thanks

here’s my code

$(document).ready(function(){
  generate_link('somelink.php', '#link ul');

  $(".mylink").css("border","3px solid red"); //this is not works :-(

});   

function generate_link(method_url, target)
{

        $.ajax({
          type: 'GET',
          url: method_url,
          dataType: 'json',
          success: function(data) {
             var str='';
             for(i=0;i<data.length;i++){
                str = str + ('<li><a href="' + data[i]['anchor'] +'" class="mylink"></li>');
                   }
             $(target).html(str);
          } 
        });
}

Answer 1

Since that CSS is being applied when the page loads and not when you do your AJAX call, the CSS isn’t being applied to the elements added with AJAX. Try moving the line where you set the border to 3px solid red to the success callback, like this:

$(document).ready(function(){
  generate_link('somelink.php', '#link ul');
});   

function generate_link(method_url, target)
{

        $.ajax({
          type: 'GET',
          url: method_url,
          dataType: 'json',
          success: function(data) {
             var str='';
             for(i=0;i<data.length;i++){
                str = str + ('<li><a href="' + data[i]['anchor'] +'" class="mylink"></li>');
                   }
             $(target).html(str);
             $(".mylink").css("border","3px solid red"); 
          } 
        });
}

I hope this helps.