同じクラスを持つ要素にクリックイベントリスナーを追加する

質問

idを削除するためのリストビューを持っています。特定のクラスを持つすべての要素にリスナーを追加し、確認のアラートを出したいと思います。

私の問題は、これが見つけたクラスを持つ最初の要素にのみリスナーを追加しているように見えることです。私は使用しようとしました querySelectorAll を使おうとしましたが、うまくいきませんでした。

var deleteLink = document.querySelector('.delete');

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

リスト

<?php 
    while($obj=$result->fetch_object())
    {
        echo '<li><a class="delete" href="removeTruck.php?tid='.$obj->id.'">'.$obj->id.'</a>'
            . '<a href="#" class="delete"></a>
                      </li>'."\n";
    }
    /* free result set */
    $result->close();       
    $mysqli->close();
?>

どのように解決するのですか？

この場合 querySelectorAll . これは NodeList を返しますが querySelector は最初に見つかった要素だけを返します。

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

そうすると、ループすることになります。

for (var i = 0; i < deleteLink.length; i++) {
    deleteLink[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

また、preventDefaultは、以下の場合にのみ行う必要があります。 confirm === false .

また、注目すべきは return false/true で束縛されたイベントハンドラに対してのみ有効であるということです。 onclick = function() {...} . 例えば addEventListening を使用する必要があります。 event.preventDefault() .

デモです。 http://jsfiddle.net/Rc7jL/3/

ES6 バージョン

もう少しすっきりさせて（安全な クロージャ・イン・ループ・ワイズ を使うことで、もう少しすっきりさせることができます。 Array.prototype.forEach を使用することで実現できます。

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

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

_{上の例では Array.from と テンプレート文字列 を ES2015 標準規格から削除しました。}