0

嗨，我有一个关于使用 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>";

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

4

3 回答 3

0

这是由于我的 css 中的 z-index 这不起作用，我已经通过删除 z-index:-1 修复了这个问题，现在一切正常，有趣的是，这个错误是由于 css 错误引起的下车

于 2013-10-21T10:41:38.487 回答
0

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

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

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);
    }
}
于 2013-10-20T13:00:27.587 回答
0

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

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

于 2013-10-20T12:39:28.503 回答