Question

我已将一个列表项添加到我的缩略图库中。缩略图显示在页面上，一切看起来都不错。现在我想点击缩略图并以模态显示其图像。但是我的click事件没有被调用，因为在查看源代码时，html不存在。当排序以某种方式完成时，我还需要对项目进行排序并执行某些功能。我需要刷新还是什么？它适用于库中已存在的其他项目。

以下是将列表项追加到DOM的javascript。

var base64 = arrayBufferToBase64(responseText.ImageThumbnail);
var thumbSrc = "data:image/gif;base64," + base64;
var base64Modal = arrayBufferToBase64(responseText.Image);
var imgSrcModal = "data:image/gif;base64," + base64Modal;
var imageId = "pop" + responseText.YogaSpaceImageId;
var imagesourceId = "imagesource" + responseText.YogaSpaceImageId;


var listItem =
  "<li class=\"col-sm-6 col-md-4\">" +
  "<div class=\"thumbnail\">" +
  "<a class=\"close\" href=\"#\">×</a>" +
  "<a class=\"image\" id=\"" + imageId + "\" href=\"\" data-toggle=\"modal\" data-target=\"#myModal\">" +
  "<img id=\"" + imagesourceId + "\" src=\"" + thumbSrc + "\" data-imagesrc=\"" + imgSrcModal + "\" alt=\"image not found\" width=\"203\" height=\"136\" />" +
  "</a>" +
  "<div class=\"caption\">" +
  "<h3>Thumbnail label</h3>" +
  "<p>...</p>" +
  "<p><a href=\"#\" class=\"btn btn-primary\" role=\"button\">Button</a> <a href=\"#\" class=\"btn btn-default\" role=\"button\">Button</a></p>" +
  "</div>" +
  "</div>" +
  "</li>";

var $li = $(listItem);
$('ul#sortable').append($li);

这永远不会被调用，因为当我查看它时它不在源中。

$('a.image').on("click", function () {
    var imagesource = $(this).find('img:first').attr('id');
    $('#modalPreview').attr('src', $('#' + imagesource).data('imagesrc'));
    $('#imageModal').modal('show');

});

附加列表项未显示在页面源中

0 个答案: