Question

我有动态创建的菜单按钮，当点击时触发对PHP脚本的AJAX调用，成功后，返回的数据将使用div显示在特定的$("#imageFrame").append(...)内。此菜单中的所有按钮都以相同的方式创建，并具有相同的功能，将数据附加到一个div。

我唯一的问题是在添加新内容之前清空div。

我尝试了.empty() - .html('') - .empty().append(<html code>) - .replaceWith()。我把它们放在AJAX帖子之前和成功回调中。到目前为止我所取得的最好成就是清空div，这几乎就像是一旦空命令运行并成功，脚本就不会再进一步了。

点击AJAX功能

<script type="text/javascript">
$(document).ready(function() {//READY FUNC
$(".albumName").click(function(){//click
    var albumid = this.id;

    $.post("includes/viewgallery.php",{albumId:albumid},function(data)  {//json
        console.log(data);  
        data = jQuery.parseJSON(data);
           $.each(data, function(key, val) {//iterate each data
               var albumName = val.albumName;
               var photoId = val.photoId;
               var photoName = val.photoName;
               var photoUrl = val.photoUrl;
               var thumbId = val.thumbId;
               var thumbName = val.thumbName;
               var thumbnailUrl = val.thumbnailUrl;
               var href = "http://217.199.187.191/mandingaarts.co.uk";

             $('#imageFrame').append('<a href="'+href+'' +photoUrl+ '" target="#lightbox"><img class="thumbnail" src="'+href+'' +thumbnailUrl+ '"/></a>');
             })//iterate each data
         });//json
    });;//click
});//READY FUNC

Answer 1

$(document).ready(function() {//READY FUNC

$(".albumName").click(function(){//click
     var albumid = this.id;
     $('#imageFrame').empty();
     $.post("includes/viewgallery.php",{albumId:albumid},function(data)  {//json
        console.log(data);  
        data = jQuery.parseJSON(data);
           $.each(data, function(key, val) {//iterate each data

               var albumName = val.albumName;
               var photoId = val.photoId;
               var photoName = val.photoName;
               var photoUrl = val.photoUrl;
               var thumbId = val.thumbId;
               var thumbName = val.thumbName;
               var thumbnailUrl = val.thumbnailUrl;
               var href = "http://217.199.187.191/mandingaarts.co.uk";

               $('#imageFrame').append('<a href="'+href+'' +photoUrl+ '" target="#lightbox"><img class="thumbnail" src="'+href+'' +thumbnailUrl+ '"/></a>');
             })//iterate each data

         });//json

    });//click

});//READY FUNC

此工作的示例位于以下代码段中：

＆＃13;

//$(function(){ ... }); is an alternative to document.Ready(...)
$(function(){
  $("#imageFrame li").on("click", function(){
    $("#imageFrame").empty();  
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageFrame">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

＆＃13;

单击动态创建的按钮和AJAX调用替换内容

1 个答案: