34580

[code]

    var button = document.getElementById('button'),
        list = document.getElementById('list');
    
    button.addEventListener('click', function() {
      list.insertAdjacentHTML('beforeend', '<li>リスト</li>');
    });
    
    // #list > li をクリックしたらそのliの背景色をたとえば赤色にしたい
[/code]

[code]

    <button id="button">リストを追加</button>
    <ul id="list"></ul>
[/code]

このようにボタンをクリックするとリストが追加されていきます。その追加されたリストがクリックされたらそのリスト(li)の背景色を赤色にしたい場合、どのように記述すればよいでしょうか？


CC BY-SA 3.0
2017-05-08T22:32:27.383
34562
2017-05-09T07:50:10.057
19687
question
javascript
JSでクリックして挿入された要素に対し、さらにクリックイベントを定義したい


追加したliにイベントを1個ずつ追加するのが、多少冗長ですがわかりやすいと思います。

[code]

    var button = document.getElementById('button'),
        list = document.getElementById('list');
    
    button.addEventListener('click', function() {
      //id確定のためのランダムIDの生成
      var tmp_id = Math.random().toString(36).slice(-8);
      //idを設定してHTMLに書き出し
      list.insertAdjacentHTML('beforeend', '<li id="'+ tmp_id  +'">リスト</li>');
      //追加したli要素を再度取得
      var add_li = document.getElementById(tmp_id);
      add_li.addEventListener('click', function() {
        add_li.style.backgroundColor = '#ff0000';
      });
    });
    
    // #list > li をクリックしたらそのliの背景色をたとえば赤色にしたい
[/code]

[code]

    <button id="button">リストを追加</button>
    <ul id="list"></ul>
[/code]

  
回答例ではidをランダムに振っていますが、一意制御を入れたりする必要がありますのでこのままアプリ化はできないと思います。またgetElementById以外でやるのも方法もあると思います。

重要なことは、追加した要素にもイベント監視（addEventListener）を追加するというところです。


CC BY-SA 3.0
2017-05-09T00:23:25.287
34564
2017-05-09T00:23:25.287
22665
34562
answer


追加する要素にイベントリスナーを付けてあげればいいです。  
追加した要素を後から個別に判定したい場合は要素を配列などで保持したり、要素にクラスやID、data属性を入れて必要になった都度取得するなどの方法があります。

JavaScript

[code]

    var button = document.getElementById('button'),
        list = document.getElementById('list');
    
    button.addEventListener('click', function() {
      var listElem = document.createElement('li');
      listElem.textContent = 'リスト';
      listElem.addEventListener('click', function(e) {
        e.currentTarget.classList.add('redBg');
      });
      list.appendChild(listElem);
    });
    
[/code]

CSS

[code]

    .redBg {
      background-color: red;
    }
    
[/code]

しかしこのようなDOM操作をページ全体に渡って過度に行うとコードがわけわからなくなるのでその場合はフレームワークの導入をおすすめします。


CC BY-SA 3.0
2017-05-09T00:59:43.830
34565
2017-05-09T00:59:43.830
14222
34562
answer


おそらくやりたいこととしてはこういうこと？

各要素にイベントをもたせるのは無駄なので親要素でハンドルしてやってます(所謂デリゲートです)。jQueryとかだともうちょっとスッキリ書ける……

(要素の判定方法とかガバガバなのでそのまま使うのは避けてください)

[code]

    const button = document.getElementById('button'),
        list = document.getElementById('list');
    let id = 1;
    button.addEventListener('click', function() {
      list.insertAdjacentHTML('beforeend', `<li>リスト項目<span>${id++}</span></li>`);
    });
    list.addEventListener('click', e=> {
      let el = e.target;
     while(el&&el!==list) {
        if(el.tagName==='LI') {
          el.style.backgroundColor = 'red';
          break;
        }
        el = el.parentElement;
      }
    }, true);
[/code]

[code]

    <button id="button">リスト項目を追加</button>
    <ul id="list"></ul>
[/code]


CC BY-SA 3.0
2017-05-09T07:34:14.273
34579
2017-05-09T07:42:01.457
2017-05-09T07:42:01.457
2376
2376
34562
answer


親要素にclickイベントを定義すれば、li要素を追加する度にイベント定義せずとも済みます。  
element.style.backgroundCololr で背景色を変える方法はHTML/CSSの役割的によろしくない為、class属性やaria-
selected属性を使用する事を推奨します。  
また、color, background-color はセットで指定する事が推奨されています。

  * [aria-selected - Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳](https://momdo.github.io/wai-aria-1.1/#aria-selected)
  * [アクセシビリティガイドライン > 33. CSSで文字の色や背景色や背景画像を指定する場合... ： 三井住友銀行](http://www.smbc.co.jp/accessibility/guidelines/guideline_33.html)

[code]

    'use strict';
    document.getElementById('button').addEventListener('click', function handleAddLi (event) {
      document.getElementById('list').insertAdjacentHTML('beforeend', '<li>リスト</li>');
    }, false);
    
    document.getElementById('list').addEventListener('click', function handleSelected (event) {
      var li = event.target;
    
      if (li.tagName === 'LI') {
        li.setAttribute('aria-selected', 'true');
      }
    }, false);
[/code]

[code]

    #list>[aria-selected="true"] {
      color: black;
      background-color: red;
    }
[/code]

[code]

    <button id="button">リストを追加</button>
    <ul id="list"></ul>
[/code]

Re: qsmq さん


CC BY-SA 3.0
2017-05-09T07:44:31.327
34580
2017-05-09T07:50:10.057
2017-05-09T07:50:10.057
20262
20262
34562
answer