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>

Answer 2

因为它变为getSpecificReader(Gate Reader)

您需要添加以下引号：getSpecificReader(\"" + val.name + "\")

然后getSpecificReader("Gate Reader")有效

Answer 3

您需要使用'或"

包装字符串参数

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

Answer 4

创建元素并使用jQuery正确添加事件侦听器

var $new_link = $("<li><a href='#'><img src='" + val.image_url + "'>" + val.name + "</a></li>");

$new_link.on('click', function(){
  getSpecificReader(val.name);
});

$("#readerList").append($new_link);

链接无法在JavaScript

4 个答案: