Javascript - 克隆元素不响应点击-6ren

Javascript - 克隆元素不响应点击

转载作者：行者123 更新时间：2023-11-30 19:57:14

25

4

我在克隆元素时遇到问题，该元素不响应 onclick。我想删除该元素和其他克隆元素的类“selected”。我仍然可以在原始元素上添加和删除该类，但不能在克隆的元素上添加和删除该类。当您按“”时，您将克隆选定的对象。它们又应该在鼠标点击时被选中和取消选中。

我知道那里有一些类似的问题，但他们都使用我不感兴趣的 jquery。

我对这里的整个代码感到困惑:http://jsfiddle.net/oveht2zr/

HTML:

<!doctype html>
    <html>
    <head>
        <title>Sandbox</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

    <body id="content">
        <h1>My Sandbox</h1>

        <div id="box1" class="box">
        </div>

        <script src="js/main.js"></script>
    </body>
</html>

受影响的 JS:

let myContent = document.querySelector('#content');
let box = document.querySelector('.box');

let z = 2;

function cloneSelected() {
    let all = document.querySelectorAll('.selected');
    let i;

    for (i = 0; i < all.length; i++) {
        let clone = all[i].cloneNode(true);
        clone.style.top = Math.floor(Math.random() * browserHeight) + 'px';
        clone.style.left = Math.floor(Math.random() * browserWidth) + 'px';
        clone.setAttribute('id', 'box' + z);
        clone.style.zIndex = z;
        myContent.appendChild(clone);
        z++;            
    }
}

document.addEventListener('keydown', function(event) {
    let key = event.key;

    switch(key) {
        case 'e':
            circle();
            break;
        case 'q':
            resizeUp();
            break;
        case 'w':
            resizeDown();
            break;
        case 'r':
            changeColor();
            break;
        case 't':
            cloneSelected();
            break;
    }

    box.style.top = (browserHeight / 2) - (boxHeight / 2) + 'px';
    box.style.left = (browserWidth / 2) - (boxWidth / 2) + 'px';
});

问候

最佳答案

在您的 cloneSelected 函数中，您应该为克隆订阅点击

function cloneSelected() {
    let all = document.querySelectorAll('.selected');
    let i;

    for (i = 0; i < all.length; i++) {
        let clone = all[i].cloneNode(true);
        clone.style.top = Math.floor(Math.random() * browserHeight) + 'px';
        clone.style.left = Math.floor(Math.random() * browserWidth) + 'px';
        clone.setAttribute('id', 'box' + z);
        clone.style.zIndex = z;
        clone.addEventListener('click', function(event) {
            if (clone.classList.contains('selected')) {
                event.target.classList.remove('selected');
            } else {
                event.target.classList.add('selected');
            }})
        myContent.appendChild(clone);
        z++;            
    }
}

关于Javascript - 克隆元素不响应点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53839453/

25

4

0

文章推荐： javascript - 如何确定元素是否属于某种组件类型？

文章推荐： c - 任何 gcc 选项可以像 "int i[]"一样对待 "int *i"吗？

文章推荐： c - C 中的表达式和 for 循环

文章推荐： javascript - IndexedDB 游标在 iOS 上更新后未获取下一条记录

Jquery可拖动位置-克隆
我有 jquery Draggable/droppable 来处理包含和帮助器选项集。我想做的是将放置的项目的顶部和左侧参数存储在两个变量中。我在下面的示例中实现了这一点(将新文档图标拖到框中)，但
Jquery动态添加下拉菜单(克隆)
我有一个带有两个链接下拉列表的表单，我需要制作许多克隆，但保留链接。这是一个示例，链接组合在我的应用程序中带有 json。链式代码:
jQuery 克隆 |
我在使用少量 jQuery 时遇到了一些逻辑问题。我很确定我需要一个循环设置，但我很难将其组合在一起。我引用了 tuts、视频、工作示例、幻灯片，甚至是原始 javascript，但仍然难以将逻辑端
PHP 克隆 child
我有一个对象，它是一个基本的树。我需要对其进行深度复制，并发现自己实现了 __clone 方法。成功的代码是: function __clone() { $object = new Custo
没有内容的文本框的 Jquery 克隆
我可以克隆一个没有内容的文本框吗？意味着如果我在克隆后在文本框中输入一些值，我想要一个空文本框。这可能吗？或者jquery克隆将其返回为innerHtml？最佳答案默认情况下，克隆会复制的值目
iPhone:复制/克隆
我想复制或克隆我自己编写的类的对象。但如果我调用复制函数，则仅复制指针。因此，如果我更改复制的对象，原始对象也会更改。有没有一种方法/功能可以真正克隆一个对象？最诚挚的问候梅兰妮最佳答案如果一
Javascript - 克隆、附加和包装
我有一些 javascripc 代码: $(this).parent().siblings().find('.year-dropdown').find('.date, .time, .details'
来自分支的 Mercurial 克隆
我们有一个包含三个命名分支的存储库，我想克隆其中一个分支。有一个善变的命令可以做到这一点吗？如果我使用 hg clone 提供(分支)路径，则会收到 404 错误。最佳答案 hg clone htt
c# - 克隆 ObservableCollection
我有带有 ObservableCollection 和其他属性的类。所以它看起来有点像这样: public class A { public int Id { get; set; } ..
没有历史的 Mercurial 克隆
我正在尝试下载一个大型开源项目的源代码，以便我可以查看它。它说要做: hg clone http://server/path 但是，这需要很长时间(我假设是因为这是一个大项目)。我并不真正关心变更集
prolog - 克隆、复制序言列表
我发现这段代码随处可见，用于复制列表或克隆列表。代码随处可见: clone([],[]). clone([H|T],[H|Z]):- clone(T,Z). ?-clone([1,2,3],Z).
java - 克隆 JFrame
我正在打印一个JFrame。在此之前，我隐藏菜单栏并将 JFrame 设置为未修饰。这工作得很好，但可见的 JFrame 发生了变化，以反射(reflect)我稍后必须恢复的已删除的控件。我想克隆
jQuery 克隆/追加创建多个重复项
我正在尝试复制一个 div 并将其附加到它的克隆之上。不幸的是，它似乎正在创建额外的重复项。这是怎么回事？这是一个示例:http://jsfiddle.net/QEN5N/ 最佳答案 live 会将
java - 克隆 ConcurrentHashMap
为什么我不能克隆 ConcurrentHashMap ? ConcurrentHashMap test = new ConcurrentHashMap(); test.put("hello",
jquery - 克隆()不工作互联网浏览器8
我有这个代码: openPopup.hide(); var substr = popupId.split('-'); var clone = $("#po
jquery 克隆。单击事件不会在新创建的克隆行上触发
这段代码几乎可以正常工作假设我的表中有 10 行，我单击顶行，它会被克隆，然后添加到表的底部，而原始数据被删除，重复这些步骤 5 次。现在，我以克隆在底部的五行结束。现在，如果我单击第一个克隆行，它
JQuery Select2 克隆
我已经设置了JSFiddle来展示我的问题。我改变了克隆方式，使其更加通用，因此我不需要为不同的表重用代码。通常，对于 select2 元素，我会这样做 $(".campaignType", $tr
带有简单换行符的 jQuery 克隆
1 2 3 $('#things').after($('#things').clone()); 克隆时如何在这两个元素之间插入中断？有没有一种巧妙的方法可以用一行代码来完成
c# - 克隆/复制获取访问器主体到新类型
我正在从现有类型动态装配中创建新类型，但只包含选定的属性: public class EmitTest { public Type Create(Type prototype, Type dy
C# 克隆——使用不可序列化的数据类型
在我的游戏引擎中实现对象克隆的过程中，我遇到了一些绊脚石。我的目标是拥有一个克隆系统，我不必逐个类地维护它，除非该类需要特殊处理。我的游戏引擎的设置围绕着一个基类 Object2D，它包含一些 Te

首页

博学

6Ren·AI

商城

Javascript - 克隆元素不响应点击