0

こんにちは、onclick イベントが innerHTML を使用して書き込まれていることに問題があります。2 つの方法で試しましたが、どちらも機能しませんでした

呼び出す必要がある関数は

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();}のとおり、私も実行しました。これは、以前に実行できたことがわかっているjavascript innerHTMLでonclickイベントを作成できないことを読んだためです。他の誰かがこの問題の修正を知っていれば、それは素晴らしいことです. これは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>";

動作しますが、最後のニュース記事でしか動作しないようです。何か不足していますか?

4

3 に答える 3

0

まず第一に、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);
    }
}
于 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 に答える
0

これが機能していなかったのは、CSS の z-index が原因でした。z-index:-1 を削除することでこれを修正したところ、すべて正常に動作するようになりました。興味深いことに、このバグが発生したのは CSS エラーが原因でした。降りる

于 2013-10-21T10:41:38.487 に答える