Question

这里的人建议我使用jQuery，但是当我将代码更改为jQuery并使用.html()时，它就像没有做任何事情。我甚至删除了一些需要添加的html代码，因为有人建议我要求大量的innerHTML和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的网络应用，但我相信这是一个javascript问题。

Answer 1

不要使用+=，因为它在不正确的实例中使用并返回“意外令牌”错误，因为var html以前不等于任何内容。我删除它似乎解决了问题。 Fiddle

如果您必须使用+=设置var html = $("#activecontent").html()，那么您可以在重新定义变量（Fiddle 2）后使用+=

Answer 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) );
  });
});

如果您想使用ajax请求将div添加到#activecontent。我们假设您的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) );
   }
});

用于ajax的替代javascript，它在DOM上更快

$.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
});

现在解释一下。第一段带有.on的javascript，正在做的是将事件监听器绑定到父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，要知道它写起来并不总是比vanilla javascript更快，而是当你做..html('new stuff');这样的事情时，它会使用一种最适合所有浏览器的方法。因此，如果有一些流氓版本的IE而不是想使用.innerHTMLmsIsNeat而不是.innerHTML，那么jQuery会为你排序。

jquery .html（）VS innerHTML（）

2 个答案:

HTML

的javascript

JSON

的javascript

用于ajax的替代javascript，它在DOM上更快