0

这里的人建议我使用 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 问题。

4

2 回答 2

2

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

如果您必须使用+=set var html = $("#activecontent").html()，那么您可以+=在重新定义变量时使用（小提琴 2）

于 2013-10-20T22:03:38.420 回答
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) );
   }
});

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

现在来解释一下。带有 的第一段 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');的事情时，它会使用一种最适合所有浏览器的方法。因此，如果有一些流氓版本的 IE 想要使用.innerHTMLmsIsNeat而不是.innerHTML，jQuery 会为您排序。

于 2013-10-20T22:38:40.237 回答