Question

我有一个＆＃39; a＆＃39;标记，单击时，通过调用jquery单击事件从库中删除缩略图。但是，如果我动态添加缩略图图像然后在同一页面上将其删除而不刷新，则点击事件不会被触发。它会触发模式窗口弹出（就像我点击图像一样）。然后，如果我按下＆＃39; x＆＃39; （关闭）模态窗口THEN触发jquery click事件以删除图像。它可以在非动态添加的拇指上工作，或者如果页面已刷新。

＆＃13;

$('a.close').click(function () {
    
    var imageId = $(this).attr('id');
    $.post(
            '/ManageSpaces/RemoveImage',
            { id: imageId }
        );
    $(this).parents('li').remove();
});

＆＃13;

<div id="row">
  <ul id="sortable">
    @foreach (var image in Model.Images.OrderBy(i => i.Ordering)) {
    <li id="@image.YogaSpaceImageId" class="col-sm-6 col-md-4 imagethumbs" data-yogaspaceid="@Model.YogaSpaceId">

      <div class="thumbnail">
        <a id="@image.YogaSpaceImageId" class="close" href="#">×</a>
        @{ var base64 = Convert.ToBase64String(image.ImageThumbnail); var thumbSrc = String.Format("data:image/gif;base64,{0}", base64); var base64Modal = Convert.ToBase64String(image.Image); var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
        var imageId = "pop" + image.YogaSpaceImageId; var imagesourceId = "imagesource" + image.YogaSpaceImageId; }
        <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>
    }
  </ul>
  <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <a href="" data-toggle="modal" data-target="#myModal">
          <img id="modalPreview" alt="image not found" width="355" height="355" />
        </a>
      </div>
    </div>
  </div>
</div>

＆＃13;

当用户选择新图像然后将其附加到ul列表时，此js片段会添加新缩略图。

＆＃13;

var listItem = 
        "<li id=\"" + responseText.YogaSpaceImageId + "\" class=\"col-sm-6 col-md-4 imagethumbs\" data-yogaspaceid=" + $("#HiddenYogaSpaceId").val() + ">" +
            "<div class=\"thumbnail\">" +
            "<a id=\"" + responseText.YogaSpaceImageId + "\" 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);

＆＃13;

Answer 1

$（＆＃39; a.close＆＃39;）选择当前可用的元素，如果你添加一个新的元素，你也需要调用你的jQuery。

$(element).yourOriginalQuery

关闭链接不工作，而是打开模态窗口

1 个答案: