克隆并附加唯一 ID 后找不到 DOM 元素

DOM element not being found after cloning and appending unique ID

本文关键字：找不到 DOM 元素 ID 唯一      更新时间：2023-09-26

所以我正在创建一个随机字符串值：

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 Demo

如果你在代码中放了一个alert(string)，你会看到字符串已经包含了rand-所以在你的选择器中只需做：

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

这是工作 JSFiddle

您有两个包含 ID 对的元素集合。

不过有三个问题。前两个问题问题在这里。

您正在获取克隆"rand-etctcetc"的完整ID然后再次添加 rand- 到它"rand-rand-etcetc"，然后将其用作选择器。$（'兰德-兰德-等'）。相反，我将其更改为仅将必要的#添加到id中。您还需要删除 js-gallery-edit 类，以便将内容添加回右侧的列表。

    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/

相关文章：