我动态创建了菜单按钮，单击该按钮时会触发对 PHP 脚本的 AJAX 调用，成功后返回的数据将显示在特定的 div 中。使用$("#imageFrame").append(...) 。此菜单中的所有按钮均以相同的方式创建，并具有将数据附加到一个 div 的相同功能。 .
我遇到的唯一问题是清空 div在添加新内容之前。
我已经尝试过.empty() -.html('') -.empty().append(<html code>) -.replaceWith() 。我已将它们放在 AJAX post 之前和成功回调内。到目前为止，我取得的最好成绩是清空 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
最佳答案
$(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
此工作的示例位于下面的代码片段中:
//$(function(){ ... }); is an alternative to document.Ready(...)
$(function(){
$("#imageFrame li").on("click", function(){
$("#imageFrame").empty();
});
});<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>关于javascript - 单击动态创建的按钮和 AJAX 调用替换内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30227870/