克隆並附加唯一ID后未找到DOM元素

Question

所以我正在創建一個隨機字符串值：

var randomString = function(stringLength) {
    var i = 0;
    stringLength = stringLength || 10;
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
    var randomString = '';
    for (i = 0; i < stringLength; i += 1) {
        var rNum = Math.floor(Math.random() * chars.length);
        randomString += chars.substring(rNum, rNum + 1);
    }
    return randomString;
};

並將其與一個窗格上的列表元素相關聯：

var addUniqueId = function($thumbnail) {
    var random = randomString(10);
    $thumbnail.attr('id', 'rand-' + random);
};

然后克隆它並將該列表元素向右移動：

    var cloneImage = function($thumbnail) {
        addUniqueId($thumbnail);
        var $lastImgAdded = $('.js-gallery-edit-pane li').last();
        var span = $('<span />');
        span.addClass('x').text('x');
        var $clone = $thumbnail.clone(true, true).appendTo($('.js-gallery-edit-pane')).prepend(span).hide().fadeIn(200).unbind('click');
        bindRemoveHandler($clone);
    };

然后我在左邊的列表元素中添加一個疊加層，將其“灰化”出來。 一切都在這一點上起作用。

從那里，用戶可以通過單擊圖像上的“X”來刪除右側最近克隆的項目。 這樣可以正常工作並刪除最近克隆的圖像，但是，找不到原始疊加層。 它應該與隨機字符串值相關聯，所以我只是在$('.js-gallery-select-pane').find('#rand-' + string).find('.overlay').remove(); 但由於某種原因，它沒有找到它......

知道為什么嗎？

JSFiddle演示

Answer 1

如果你在你的代碼中放了一個alert(string) ，你會看到字符串已經包含了rand-所以在你的選擇器中只做：

$('.js-gallery-select-pane').find('#' + string).find('.overlay').remove();

這是工作的JSFiddle

Answer 2

您有兩個元素集合，其中包含ID對。

但是有三個問題。 前兩個問題在這里..

您正在獲取克隆'rand-etctcetc'的完整ID，然后再將rand-添加到'rand-rand-etcetcetc'，然后將其用作選擇器。 $（ '蘭特，蘭特etcetcetc'）。 相反，我改變它只是將必要的＃添加到id。 您還需要刪除js-gallery-editing類，以便將內容添加回右側的列表中。

    var bindRemoveHandler = function($thumbnail) {
      $thumbnail.on('click', function() {
        $(this).fadeOut(200, function() {
          var string = $(this).attr('id');
          $('.js-gallery-select-pane').find('#' + string).removeClass('js-gallery-editing').find('.overlay').remove();
          $(this).remove();
          updatePictureCount();
        });
      });
    };

你可以在這里停下來，但你也有不同的問題。 ID屬性旨在是唯一的。 嘗試使用自定義屬性，Jquery屬性等於選擇器。 你想要的查詢看起來像這樣..

     $('.js-gallery-select-pane').find('[pairid="' + string +'"]');

在這里，有一個小提琴： http ： //jsfiddle.net/s3dCB/