Question

我有一个名为overlay-controls的父div中包含的控件列表。

有许多列表控件，每个控件都有自己的overlay-controls。

我正在使用for循环将事件侦听器添加到包含类delete的每个按钮。

在用户删除项目之前，他们必须确认。我试图将它附加到overlay-controls中找到的每个删除按钮。

我使用for循环工作但是我知道使用冒泡和捕获有更好的方法。我无法通过冒泡到父div来定位覆盖控件中的删除类。

点击每个删除按钮，查看此处的实时演示：http://jsfiddle.net/8qqfeoa2/1/

这是我使用for循环的代码：

 (function() {
        function getConfirmation(e){
            var retVal = confirm("Are you sure you want to delete this request?");
            if( retVal == true ){
               return true;
            }else{
               e.preventDefault();
               return false;
            }
         }

        var del = document.querySelectorAll('.delete');

        for(var i = 0, len = del.length; i < len; i++){
        del[i].addEventListener('click', function(e) {
            getConfirmation(e);
        }, false);
        }

    }());

Answer 1

你没有事件需要For / .each循环

Jquery在内部处理它

$('.delete').on('click', function(e){ getConfirmation(e); });

如果您使用的是jQuery，并且在getConfirmation方法中，您也可以使用 e.target 获取该特定（点击）元素，该元素将返回发生点击的目标。

Answer 2

仅限Javascript解决方案

正如您所要求的那样

var deletebuttons = document.getElementsByClassName('delete'); for(var button in deletebuttons) { button.onclick = getConfirmation; }

通过冒泡处理许多元素的点击事件

2 个答案: