2017-12-13 13 views
1

私はselect multiple入力を受け取り、この選択肢のオプションに基づいてチェックボックスを生成する関数を作成しました。次に、各チェックボックスがクリックされたときに何らかのアクションを実行するようにします。関数は次のとおりです。プログラムで作成されたaddEventListenerチェックボックスが機能しない

const makeCheckboxDropdown = (input) => { 
    if (input.type !== "select-multiple") { 
     console.error("The input must be an `select multiple` type!") 
     return 
    } 

    input.options[0].selected = false 

    const header = document.getElementById('header') 
    const outer = document.createElement('div') 
    const options = input.options 
    for (i = 0; i < options.length; i++) { 
     let div = document.createElement('div') 
     div.classList.add('checkbox') 

     let label = document.createElement('label') 

     let cb = document.createElement('input') 
     cb.type = "checkbox" 
     cb.value = options[i].value 
     cb.addEventListener("change", (e) => console.log("clicked")) 

     label.appendChild(cb) 
     label.innerHTML += options[i].value 

     div.appendChild(label) 
     outer.appendChild(div) 
    } 
    header.parentNode.insertBefore(outer, header.nextSibiling) 
} 

すべて動作します:チェックボックスは意図したとおりに生成されます。それ以外は、チェックボックスをクリックすると何も起こりません。それはコンソール上で "クリックされた"と記録する必要がありますが、何も起こりません。不思議なことに、この同じEventListenerをブラウザのデバッグコンソールから追加すると動作します。

ここで何が起こっているか

編集:repl.itの例。

答えて

2

これは、既にチェックボックスを追加した後で、ラベルにinnerHTMLを使用した場合の問題です。 1つの選択肢は、以下のようなわずかな変更です。私が行ったことは、別の要素(スパン、あなたもdocument.createTextNodeを使用するかもしれません)を付加することです。このアクションは、その内部にチェックボックスがある要素にinnerHTMLを使用していないので安全です。

この質問にはinnerHTMLが何をしているのかの説明があります。here

私はあなたがinnerHTMLでHTMLを変更(例えば、あなたのlabel DOM要素にchildrenを使用)、その時点でリスナーを適用した後でも、もう一度チェックボックスを取得することによってこの問題を解決する可能性が信じているが、私はことをお勧めしません方法。

function ready(fn) { 
 
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ 
 
    fn(); 
 
    } else { 
 
    document.addEventListener('DOMContentLoaded', fn); 
 
    } 
 
} 
 

 
function theFunc(e) { 
 
    console.log('clicked'); 
 
} 
 

 
ready(() => { 
 
    const makeCheckboxDropdown = (input) => { 
 
    if (input.type !== "select-multiple") { 
 
     console.error("The input must be an `select multiple` type!"); 
 
     return; 
 
    } 
 

 
    input.options[0].selected = false; 
 
    
 
    const header = document.getElementById('header'); 
 
    const outer = document.createElement('div'); 
 
    const options = input.options; 
 
    for (i = 0; i < options.length; i++) { 
 
     let div = document.createElement('div'); 
 
     div.classList.add('checkbox'); 
 

 
     let label = document.createElement('label'); 
 

 
     let cb = document.createElement('input'); 
 
     cb.type = "checkbox"; 
 
     cb.value = options[i].value; 
 
     cb.addEventListener('change', theFunc); 
 

 
     label.appendChild(cb); 
 
     
 
     let value = document.createElement('span'); 
 
     value.textContent = options[i].value; 
 
     label.appendChild(value); 
 

 
     div.appendChild(label); 
 
     outer.appendChild(div); 
 
    } 
 
    header.parentNode.insertBefore(outer, header.nextSibiling); 
 
    }; 
 

 
    const a = document.getElementById('a'); 
 
    makeCheckboxDropdown(a); 
 
})
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>repl.it</title> 
 
    <link href="index.css" rel="stylesheet" type="text/css" /> 
 
    </head> 
 
    <body> 
 
    <script src="index.js"></script> 
 
    <div class="content"> 
 
     <div class="clearfix"></div> 
 
     <div class="box box-primary"> 
 
      <div class="box-body"> 
 
       <h4 id="header">Dias da Semana</h4> 
 
       <select id="a" multiple> 
 
        <option>1:00 am</option> 
 
        <option>2:00 am</option> 
 
        <option>3:00 am</option> 
 
        <option>4:00 am</option> 
 
        <option>5:00 am</option> 
 
        <option>6:00 am</option> 
 
        <option>7:00 am</option> 
 
        <option>8:00 am</option> 
 
        <option>9:00 am</option> 
 
        <option>10:00 am</option> 
 
        <option>11:00 am</option> 
 
        <option>12:00 pm</option> 
 
        <option>13:00 pm</option> 
 
        <option>14:00 pm</option> 
 
        <option>15:00 pm</option> 
 
        <option>16:00 pm</option> 
 
        <option>17:00 pm</option> 
 
        <option>18:00 pm</option> 
 
        <option>19:00 pm</option> 
 
        <option>20:00 pm</option> 
 
        <option>21:00 pm</option> 
 
        <option>22:00 pm</option> 
 
        <option>23:00 pm</option> 
 
        <option>00:00 am</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

+0

ありがとうございます!あなたの答えの中のリンクが示すように、 'label.appendChild(document.createTextNode([...]))'の 'label.innerHTML + = [...]'を変更することで解決しました。 –

関連する問題