onClick 事件不使用 innerHTML

onClick events not firinng with innerHTML

本文关键字：innerHTML 事件 onClick      更新时间：2023-09-26

嗨，我在使用 innerHTML 写入 onclick 事件时遇到问题，我尝试了两种方式，但都不起作用

它需要调用的函数是 

function loadnewsstory()
{
    alert("123456");
}

目前，它应该显示带有123456的警报框，但它没有触发。

加载它的函数如下

function newsstories()
{
    document.getElementById("activecontent").innerHTML = "<h1 class='newsheader'>Latest News</h1>";
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","test.com?uri=loadnews",false);
    xmlhttp.send();
    var newsreponse = JSON.parse(xmlhttp.responseText);
    var countstories = 0;
    for (var i = 0, len = newsreponse.length; i < len; ++i) {
     var news = newsreponse[i];
     if(i % 2 == 0){
       cssclass = "even";
     }
     else
     {
       cssclass = "odd";
     }
      //  alert(news.featured_image);
     document.getElementById("activecontent").innerHTML += "<div class='news " + cssclass + "'><div class='newstitle'><div class='newstitlecolor'><a href='#' onclick='loadnewsstory();'>" + news.post_title + "</a></div></div><div class='base' style='background: url('" + news.featured_image + "');'><img src='" + news.featured_image + "'  style='width:100%; height:100%;' id='news_"+ countstories +"'/></div></div>";

        document.getElementById("news_"+countstories).onclick = function(){ loadnewsstory();}

        countstories++;
    }
}

如您所见，我也运行了document.getElementById("news_"+countstories).onclick = function(){ loadnewsstory();}，因为我读到onclick事件不能由javascript innerHTML编写，我知道我以前能够做到。如果其他人知道解决此问题的方法，那就太好了。这是针对科尔多瓦iPhone应用程序

谢谢

编辑

我发现这个

document.getElementById("activecontent").innerHTML += "<div class='news " + cssclass + "'><a href='javascript:openextlink();'><img src='" + news.featured_image + "'  style='width:100%; height:100%;'/></a></div>";

有效，但它似乎只适用于最后一个新闻故事，我错过了什么。

我怀疑这是因为您的请求试图过早地读取/解析来自服务器的响应：

xmlhttp.send();
var newsreponse = JSON.parse(xmlhttp.responseText);

因为这是一个异步 （Ajax） 请求，所以您需要给脚本时间等待服务器响应。为此，请创建等待响应的事件处理程序。

xmlhttp.onreadystatechange=function() { // checks if the state of the request has changed
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { // checks that the response is ready
        // code to handle the response here
        var newsreponse = JSON.parse(xmlhttp.responseText);
        // etc.
    }
}

另请注意，应在调用xmlhttp.send();之前创建此处理程序

首先，附加到innerHTML通常非常糟糕。如果你像在循环中一样something.innerHTML += 'lots of html'运行代码，浏览器必须在每次迭代时更新 DOM 树并重新呈现页面。这可能会大大减慢事情的速度。请改用缓冲区字符串。

我还怀疑这可能会导致事件附件出现问题。尝试在所有div都附加到树后附加事件。在这种情况下，代码将是这样的：

function newsstories()
{
    // Use a variable that would store the newly generated HTML:
    var html = "<h1 class='newsheader'>Latest News</h1>";
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","test.com?uri=loadnews",false);
    xmlhttp.send();
    var newsreponse = JSON.parse(xmlhttp.responseText);
    for (var i = 0, len = newsreponse.length; i < len; ++i) {
        var news = newsreponse[i];
        // Notice the 'var' keyword!
        if(i % 2 == 0){
            var cssclass = "even";
        } else {
            var cssclass = "odd";
        }
        // Append to our buffer variable
        html += "<div class='news " + cssclass + "'><div class='newstitle'><div class='newstitlecolor'><a href='#' onclick='loadnewsstory();'>" + news.post_title + "</a></div></div><div class='base' style='background: url('" + news.featured_image + "');'><img src='" + news.featured_image + "'  style='width:100%; height:100%;' id='news_"+ i +"'/></div></div>";
    }
    // Now that new html is ready, insert it into the tree
    // and attach events
    document.getElementById("activecontent").innerHTML = html;
    for (var i = 0, len = newsreponse.length; i < len; ++i) {
        var img = document.getElementById('news_'+i);
        if(img) img.addEventListener('click', loadnewsstory);
    }
}
由于我的 CSS 中的 z-index

不起作用，我已经通过删除 z-index：-1 来解决此问题，现在一切正常，有趣的是，正是由于 CSS 错误，这个错误才出现

相关文章：