Question

嗨我有使用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编写，我知道我之前已经能够做到了。如果其他人知道这个问题的解决方案会很棒。这是一个cordova 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>";

有效，但它似乎只适用于最后的新闻报道，我错过了什么。

Answer 1

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

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

因为这是一个asyncronus（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();

之前创建此处理程序

Answer 2

首先，追加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);
    }
}

Answer 3

这是由于我的css中的z-index，这不起作用，我通过删除z-index修正了这个：-1现在一切正常，有趣的是它是由于css错误导致的虫子来了

onClick事件没有使用innerHTML触发

3 个答案: