0

ここにいる人はjQueryを使うように勧めていますが、コードをjQueryに変更して使っ.html()てみると何もしなかったようなものです。追加する必要のある html コードの半分を削除したこともありました。

単純なタスクでは、ユーザーが onClick イベントを実行する DIV をクリックしたときだけが必要です。

 html += "<div onClick='loadnewsstory();' class='news'> this is a test story, for this test story we are not getting data from JSON</div>";

私は両方を試しました

$("#activecontent").html(html);
document.getElementById("activecontent").innerHTML

私が抱えている問題は、次のコードに関連しています。

function newsstories()
{
    document.getElementById("activecontent").innerHTML = "<h1 class='newsheader'>Latest News</h1>";

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","http://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];
     if(i % 2 == 0){
       cssclass = "even";
     }
     else
     {
       cssclass = "odd";
     }

      //  alert(news.featured_image);
     document.getElementById("activecontent").innerHTML = document.getElementById("activecontent").innerHTML + "<div class='news " + cssclass + "'><div class='newstitle'><div class='newstitlecolor' id='news_"+ countstory+"'><a href='javascript: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%;'/></div></div>";


    }
}

あなたは私がリンクを持っているこの領域に表示されます

<a href='javascript:loadnewsstory();'>" + news.post_title + "</a>

発火するはずです

function loadnewsstory()
{
    navigator.notification.alert(device.uuid);
}

しかし、私はその火をつけていません。

はい、これは iOS および Cordova 用の Web アプリですが、これは JavaScript の問題だと思います。

4

2 に答える 2

2

あなたの構造が次のように見える場合

html

<div id="activecontent">
  <div class='news'>Story 1</div>
  <div class='news'>Story 2</div>
</div>

それぞれdiv.newsを動的でクリック可能にしたい場合は、jQuery を使用してこのようにすることができます

JavaScript

$(function(){
  $("#activecontent").on('click', '.news', function(){
     //You clicked the div 
     console.log( 'Clicked', $(this) );
  });
});

#activecontentまた、 ajax リクエストでdiv を追加したい場合。JSONが次のようになっているとしましょう

json

[
  { "id": 1, "content": "My first story" },
  { "id": 2, "content": "Another one" },
  { "id": 3, "content": "Last story" }
]

ロードするJavaScriptは次のようになります

JavaScript

$.getJSON( "http://url_of_json.json", function(result){
   for(var i in result){
      $("#activecontent").append( $("<div>").addClass('news').html(result[i].content) );
   }
});

DOM で高速な ajax の代替 JavaScript

$.getJSON( "http://url_of_json.json", function(result){
   var newHtml = "";
   for(var i in result){
     newHtml += "<div class='news'>" + result[i].content + "</div>";
   }
   $("#activecontent").append( newHtml );
   // Or $("#activecontent").html( newHtml );
   // if you want to replace what the page loaded with
});

今説明する。を使用した JavaScript の最初の部分で、.onそこで行っていたのは、イベント リスナーを親 div にバインドすること#activecontentです。これは、ページに常に存在するためです。AJAX 呼び出しに基づいて、そのコンテナーに div を追加したり削除したりする場合があるため、クリックをバインドする (またはすべての div に JavaScript をインライン化する) 代わりに、親に一度バインドしてから、そのクリックを ' 。ニュース'。別の方法として、クリックを新しい div ごとにバインドすることもできますが、委任する方がクリーンです。

JSONの読み込みと書き込みに関する部分について。ノードの innerHTML に何かを追加する場合、jQuery の方法は を使用すること.append()です。それは次のようなものへの単なるショートカットです

//vanilla js way
var e = document.getElementById('myThing');
e.innerHTML = e.innerHTML + "Thing I want to append";
// vs jQuery way
$("#myThing").append("Thing I want to append");

//To continue this example, to replace your myThing's html
//vanilla
e.innerHTML = "my new html";
//jQuery
$("#myThing").html("my new html");

うまくいけば、これで問題が解決します。jQuery を始めたばかりの場合は、標準の JavaScript よりも常に高速に記述できるとは限りませんが、..html('new stuff');. .innerHTMLmsIsNeatしたがって、IE の代わりに使用したい不正なバージョンの IE が存在する場合.innerHTML、jQuery はそれをソートします。

于 2013-10-20T22:38:40.237 に答える
2

+=は不適切なインスタンスで使用され、「予期しないトークン」エラーが返されるため、使用しないでくださいvar html。それを削除したところ、問題が解決したように見えました。フィドル

+=setを使用する必要var html = $("#activecontent").html()がある場合は、後で+=変数を再定義するときに使用できます ( Fiddle 2 )

于 2013-10-20T22:03:38.420 に答える