Question

我正在尝试使用jquery ui制作可排序且可调整大小的图像相册。可分类和可调整大小的工作正常。但我还需要该功能将图像作为链接。所以我创建了一个函数，只要单击一个图像就可以执行，这样就可以编辑它，这将显示一个对话框来添加url。但我被困在编辑链接。当我点击编辑时，没有任何反应。我究竟做错了什么？请你帮助我好吗。谢谢。

jsfiddle

演示

//   START --> image scaling 
function image_resize(image) {
  image.resizable({
    disabled: false,
    containment: "#content"
  });
}    

//   START --> image as link
function edit_image(image) {
  image.wrap('<div id="edit-image"></div>');
  $('#edit-image').prepend('<a href="#">EDIT</a>');
  $("#edit-image a").center(true).css("cursor", "pointer").css("z-index","1");
}

//   START --> image sortable
$('#sortable').sortable();

$('#sortable li img').on("click", function() {
  $image = $(this);
  image_resize($image);
  edit_image($image);
});

$('#edit-image a').on("click", function() {
  alert("edit clicked");
});

<div id="content">
  <p>Please click on the image</p>
  <ul id="sortable">
    <li class=""><img src="http://placehold.it/150x150"></li>
    <li class=""><img src="http://placehold.it/250x150"></li>
    <li class=""><img src="http://placehold.it/100x150"></li>
    <li class=""><img src="http://placehold.it/150x150"></li>
    <li class=""><img src="http://placehold.it/120x150"></li>
    <li class=""><img src="http://placehold.it/150x150"></li>
    <div class="clear_both"></div>
  </ul>
</div>

Answer 1

这是您的解决方案。 Demo

var $image;
    //   START --> centering element
            jQuery.fn.center = function(parent) {
              if (parent) {
                parent = this.parent();
              } else {
                parent = window;
              }
              this.css({
                "position": "absolute",
                "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
                "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
              });
              return this;
            }

    //   START --> image scaling 
    function image_resize(image) {
      image.resizable({
        disabled: false,
        containment: "#content"
      });
    }    

    //   START --> image as link
    function edit_image(image) {
      image.wrap('<div id="edit-image"></div>');
      $('#edit-image').prepend('<a href="#">EDIT</a>');
      $("#edit-image a").center(true).css("cursor", "pointer").css("z-index","1");

         $('#edit-image a').on("click", function() {
      alert("edit clicked");
    });
    }

    //   START --> image sortable
    $('#sortable').sortable();

    $('#sortable li img').on("click", function() {
      $image = $(this);
      image_resize($image);
      edit_image($image);
    });

您需要将点击操作绑定到＆＃39;＃edit-image a＆＃39; dom追加页面后。

制作图像resizalbe和链接

1 个答案: