Question

好的，所以我做了很多重写，以消除添加eventlisteners的循环..

This link explains -> Handling Events for Many Elements

但这种方式会给我一些问题...基本上我如何为每个生成的编辑标签添加一个eventListener？（见php代码）我可以通过创建一个为每个标签添加事件监听器的循环来做到这一点，但显然这是不好的做法？

现在我的“父”元素是<div id="popUp">，这使得当点击<div class="col100 pad10 flex editUsers"></div>内的整个代码而不仅仅是“编辑标签”时弹出窗口... 如果我想在弹出窗口中加载表单，我怎么能动态添加正确的表单信息？

PHP LOOP

<div id="popUp">
<?php
$stmt = $dbCon->prepare(" SELECT id, username, level "
        . " FROM bilbixen_login ");
$stmt->execute();
$stmt->bind_result($id, $username, $level);
while ($stmt->fetch()) {
    ?>
    <div class="col100 pad10 flex editUsers">
        <div class="col80">
            <p>User : <?php echo $username; ?></p>
            <p>Level : <?php echo $level; ?></p>
        </div>
        <form class="" action="#" method="POST">
            <input class="" id="submitDelete<?php echo $id; ?>" type="radio" name="status" value="0">
            <input class="" id="submitAccept<?php echo $id; ?>" type="radio" name="status" value="1">
            <input type="hidden" value="<?php echo $id; ?>" name="userId">
            <input id="submit<?php echo $id; ?>" type="submit" name="submit">
        </form>
        <div class="flex col20 space-b">
            <label for="submitDelete<?php echo $id; ?>" class="pad10 bgcr pointer">Delete</label>
            <label for="submitAccept<?php echo $id; ?>" class="pad10 bgcg pointer">Edit</label>
            <label for="submit<?php echo $id; ?>" class="pad10 bgcb pointer">Submit</label>
        </div>
    </div>
    <?php
}
$stmt->close();
?>
</div>

使用Javascript /弹出

<script>
    var popUp = document.querySelector('#popUp');
    var btn = document.getElementById('btn');
    var close = document.getElementById('close');

    popUp.addEventListener("click", doSomething, false);

    function doSomething(e) {
        if (e.target !== e.currentTarget) {
            overlay.style.display = 'block';
        }
        e.stopPropagation();
    }
    close.addEventListener('click', function () {
        overlay.style.display = 'none';
    });
    window.addEventListener('click', function (event) {
        if (event.target === overlay) {
            overlay.style.display = "none";
        }
        ;
    });
</script>

处理许多元素的事件（问题）

0 个答案: