Сделайте div кликабельным в javascript

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);
    }

Таким образом, i в jsonObj.response.artists[i].id фактически будет параметром iот анонимной функции, которая является индивидуальным значением i из цикла во время выполнения каждой итерации.