Question

克隆元素时出现问题，该元素对onclick无效。我想删除该元素和其他克隆元素的“选定”类。我仍然可以在原始元素上添加并删除该类，但不能在已克隆的元素上添加和删除该类。当您按“ t”时，将克隆所选对象。反过来，应该在鼠标单击时选择和取消选择它们。

我知道那里也有一些类似的问题，但是它们都使用了jquery，我对此并不感兴趣。

我在这里摆弄着整个代码：http://jsfiddle.net/oveht2zr/

HTML：

MY_SQL = 'select * from tableA where fieldA in ({})'.format(
  ','.join([str(x) from x in list_items]))
df = pd.read_sql(MY_SQL, con=con)

受影响的JS：

<!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>

致谢

Answer 1

在您的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++;            
    }
}

Answer 2

您正在将eventListener添加到名为box的变量中，该变量在函数顶部设置。在设置此变量时，您的克隆框不存在，因此它不包含在创建querySelectorAll变量的box中，因此没有得到eventListener。 / p>

我还没有详细检查您的代码，但是我想您可以在box之后简单地在cloneSelected函数中重新设置myContent.appendChild。

Javascript-克隆的元素不响应点击

2 个答案: