在JavaScript中使div可单击

yrdbyhpb 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(97)

我正在尝试动态地创建可点击的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";
  }

JavaScript

来源：https://stackoverflow.com/questions/9857026/make-a-div-clickable-in-javascript

1条答案

按热度按时间

tsm1rwdh1#

您正在调用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的单独值。

赞(0）回复(0）举报 2023-01-24

我来回答

在JavaScript中使div可单击

1条答案

相关问题

热门标签

最新问答