的onclick事件不是innerHTML的

Question

嗨firinng我有一個的onclick事件的問題，使用的innerHTML我曾嘗試做兩種方式並且都不起作用

它需要調用的函數是

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

被writen

此刻它應該顯示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>"; 

的作品，但它似乎只在最後的新聞報道工作，是我遺漏了什麼。

Answer 1

我懷疑這是因爲你的要求是試圖讀取/解析從服務器太快這裏的響應：

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

因爲這是一個asyncronus（阿賈克斯）要求你需要給腳本的等待時間爲服務器做出迴應。您可以通過創建等待響應的事件處理程序來完成此操作。

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

這是由於z-index的在我的CSS，這是不工作，我已經刪除的z-index固定這樣的：-1，現在所有的作品好，有趣的是，這是由於一個CSS錯誤，這個錯誤來了