AJAX-不返回值

Question

I am trying to show mysql results from images.php to index.php . After I click on one link of my categories(which are named by id ) then I want to show values from images.php .
Every category has one <div> which is tagged by id
The script doesn't work well, it only shows Loading...

$("a.load").on('click',function() {
 var id = $(this).attr('data-gallery'); 
  $.ajax({
   url: 'http://example.com/images.php?c=' + id,
   beforeSend: function() {
   $("#" + id).html("Loading...");
  },
  success: function(data) {
   $("#" + id).html(data);
  }
 });
},function() {
   var id = $(this).attr('data-gallery'); 
    $("#" + id).html("");
});  

Thanks

[EDIT]

Here is my HTML code in index.php

 <section class="mainmywork" id="categories">
    <div class="container">
    <!--<h1 class="myworkheading"><p>CATEGORIES</p></h1>!-->        
    <?php
     foreach($images as $categories) {
      echo '<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 categories">
             <a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><img class="center-block" src="'.showConfigValues("img_source").'/'.$categories["photos_name"].'" alt=""></a>
              <a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><h2><p>'.$categories["name"].'</p></h2></a>
            </div>
            <div id="'.$categories["code"].'">

            </div>';
     }
    ?>
    </div>
   </section>

and here is the which is in images.php

<?php
 if(isset($_GET["c"])) {
  $gallery_code = htmlspecialchars($_GET["c"]);

  require_once 'init.php';

 $db = new DB;

  $query = "SELECT * 
       FROM photos
       INNER JOIN gallery
        ON gallery.code = photos.gallery_code AND photos.title_photo != 'y'
       WHERE photos.gallery_code = '".$gallery_code."' OR gallery.name = '".$gallery_code."'
        ORDER BY photos.id"; 

     $photos = $db->get_special($query); 
  ?>

  <div id="lk-gallery">
   <div class="wrapper">
    <main id="main" role="main" class="photo-lk">
     <?php
   if($photos[0] != '') {
    foreach($photos as $image) {
     $mask_description = $image["photos_description"];
      echo '<img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" />'; 
    }    
   } 
    else 
         { echo '<p class="inprogress">Sorry, I am working on this one!<br><a href="/#categoriesanchor">Check out my other photos</a></p>'; } 
    ?>
    </main>
   </div>
  </div>

  <div class="lk-gallery-touch">
   <div class="flexslider">
    <div class="wrapper">
     <main id="main" role="main" class="photo-lk">
   <ul class="slides">
    <?php
     if($photos[0] != '') {
      foreach($photos as $image) {
       $mask_description = $image["photos_description"];
        echo '<li><img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" /></li>'; 
      }    
     } 
      else 
          { echo '<p class="inprogress">Sorry, I am working on this one!<br><a href="/#categoriesanchor">Check out my other photos</a></p>'; } 
    ?>
     </ul> 
    </main>
   </div> 
  </div>
 </div>
 <?php 
  }
  ?>

Answer 1

Try this:

$("a.load").on('click',function() {
  var id = $(this).data('gallery'); // use .data() method 
  var $id = '#'+id;
  $.ajax({
      url: 'http://example.com/images.php?c=' + id,
      beforeSend: function() {
          $id.html("Loading...");
      },
      success: function(data) {
         $id.html(data);
      },
      error: function(){
         $id.html("Error...");
      }
  });
}); 

Answer 2

According to the documentation , the second argument to the .on function when there is more than 2 arguments is a selector string, but you have passed what appears to be your desired event handler. The last argument should be the event handler, in your code sample that is:

function() {
   var id = $(this).attr('data-gallery'); 
   $("#" + id).html("");

If you remove that last function, leaving just 2 arguments to .on , your handler should be called as expected.