链接在JavaScript中不起作用

Question

链接在HTML中设置时有效,但不在JavaScript中.这些功能将更改为另一个页面.JavaScript链接正确显示图像和名称,但通过单击链接,我得到"语法错误"的特定错误.尝试了不同的引号,但它不起作用,我现在很无能为力.

$("#readerList").append("<li><a href='#' onclick='getSpecificReader(" + val.name + ")' ><img src='" + val.image_url + "'>" + val.name + "</a></li>"); 
             

<li><a href="#" onclick="getReaderByType('Gate Reader')">Gate Readers<span class="ui-li-count">25</span></a></li>

Answer 1

不要试图通过将字符串混合在一起来构建JavaScript.不要试图通过将字符串混合在一起来构建HTML.绝对不要试图将两者结合起来.你只是在寻找嵌套逃逸问题的噩梦.

使用DOM.建立你的元素.绑定您的事件处理程序.让jQuery和本机DOM函数为您处理所有的转义.

它更冗长,但更易于管理.

function getSpecificReader (val) { alert(val); }

var val = {
    name: "foo",
    image_url: "https://ac3d197e9505f18c50e0-32b9f49f48b2c22be12b40ee79e2acc4.ssl.cf1.rackcdn.com/icon/logos_and_badges_thumbs_up/7x5uDqD4GBTrCSbXggZ-/58C79CAE-C3E6-4D6A-BAF5-A03631274FD7.png"
  };

var list_item = $("<li />");
var link = $("<a />",
  {
    href: "#", // A link to the top of the page? Use a button instead
  }).on('click', function(event) {
  // Beware of creating a closure here. http://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript
  getSpecificReader(val.name);
});
var image = $("<img />", {
  src: val.image_url,
  alt: "Images require an alt attribute"
});
var text = document.createTextNode(val.name);
link.append(image);
link.append(text);
list_item.append(link);
$("#readerList").append(list_item);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="readerList">

</ul>