javascriptでdivをクリック可能にする

Question

私は、クリック可能なdivを動的に作成しようとしています。私はテスト機能を挿入しました。テスト機能は、divがクリックされていなくても実行されます。助けてくれてありがとう。

function displayResults(responseTxt) 
    { 
     var results = document.getElementById("results"); 
     jsonObj = eval ("(" + responseTxt + ")"); 
     var length = jsonObj.response.artists.length; 
     results.innerHTML = "Please click on an artist for more details: " 

     for (var i = 0; i < length; i++) 
     { 
      var entry = document.createElement("div"); 
      var field = document.createElement("fieldset"); 

      entry.id = i; 
      entry.innerHTML = i + 1 + ". " + jsonObj.response.artists[i].name; 
      field.appendChild(entry); 
      results.appendChild(field); 
      //entry.addEventListener("click", idSearch(jsonObj.response.artists[i].id), false); 
      entry.addEventListener("click", test(), false); 

     } 
    } // end function displayResults   

    function test() 
    { 
     document.getElementById("results").innerHTML = "tested"; 
    } 

Answer 1

あなたはtest()関数を呼び出すと.addEventListener()にその戻り値を渡しています。

entry.addEventListener("click", test, false); 

.addEventListener()に関数自体を渡すようにしてください。

あなたはこれを行うだろうコメントアウト持っているラインのために、あなたの次の問題を予測するように求めて質問に答える、しかし：に渡す無名関数を作成し、

entry.addEventListener("click", 
         function() { 
          idSearch(jsonObj.response.artists[i].id); 
         }, false); 

です.addEventListener()ここで、無名関数は、idSearch()関数をパラメータで呼び出す方法を知っています。イベントが実際にトリガーされたときには、iはループの終わりからの値を持つため、動作しません。 iの個々の値にアクセスできるように、あなたは余分な機能/クロージャを追加する必要があります。

for (var i = 0; i < length; i++) 
    {   
     var entry = document.createElement("div"); 
     var field = document.createElement("fieldset"); 

     entry.id = i; 
     entry.innerHTML = i + 1 + ". " + jsonObj.response.artists[i].name; 
     field.appendChild(entry); 
     results.appendChild(field); 
     // add immediately-invoked anonymous function here: 
     (function(i) { 
      entry.addEventListener("click", 
           function() { 
            idSearch(jsonObj.response.artists[i].id); 
           }, false); 
     })(i); 
    } 

jsonObj.response.artists[i].idでiは、実際の個々の値である匿名関数からパラメータiになるだろうその方法iを各ループ実行時のループから削除します。