Question

我正在尝试在动态内容上应用querySelectorAll。
我正在实现如下代码：

<div class="drag" draggable="true">hello</div>
<div class="drop"></div>

这些标签是在页面上动态创建的。 QuerySelectorAll不会同时处理这两个标记。

            var cols = document.querySelectorAll('.drag');
        [].forEach.call(cols, function (col) {
            col.addEventListener('dragstart', handleDragStart, false);
            col.addEventListener('dragend', handleDragEnd, false);
        });

        var colss = document.querySelectorAll('.drop');
        [].forEach.call(colss, function (col) {
            col.addEventListener('dragenter', handleDragEnter, false)
            col.addEventListener('dragleave', handleDragLeave, false);
            col.addEventListener('dragover', handleDragOver, false);
            col.addEventListener('drop', handleDrop, false);
        });

我的问题是我正在尝试在这两个div上应用代码，但如果这些标签是静态的，则querySelectorAll正在工作，但如果我动态创建这两个div，则它们无法正常工作。

我已应用此代码 HTML5拖放API参考[链接]：http://www.html5rocks.com/en/tutorials/dnd/basics/

提前致谢...... !!!

Answer 1

我使用jQuery解决了这个问题。以下代码效果最佳：

            $('body').on('dragstart', '.drgbl', function (e) {
            handleDragStart(e)
        });
        $('body').on('dragend', '.drgbl', function (e) {
            handleDragEnd(e)
        });
        $('body').on('dragenter', '.rght-element', function (e) {
            handleDragEnter(e)
        });
        $('body').on('dragleave', '.rght-element', function (e) {
            handleDragLeave(e)
        });
        $('body').on('dragover', '.rght-element', function (e) {
            handleDragOver(e)
        });
        $('body').on('drop', '.rght-element', function (e) {
            handleDrop(e)
        });

这个jQuery代码在动态数据上运行得非常好，因为.on()非常容易处理动态数据附加处理程序。

谢谢每个人都能找到答案。

QuerySelectorAll可以处理动态添加的内容吗？

1 个答案: