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的个别值每次迭代都会运行。

在javascript中使div可点击

1 个答案: