Question

我试图从json（它的作品）加载文章并添加链接到fucntion，但是当我添加带有onclick函数的href标签（例如 - alert）时，该函数不起作用。

我错过了什么？

$.getJSON(categoryAddr,function(data){
    json=data;
    jQuery(function ($) {
    $.each(json, function (i, value) {
        var list ="<a href='#' onclick='alert('hey!');'>"
        +"<h1>" + value.title + "</h1>" 
        + "<img src='" + value.image + "' alt=''/>"
        +"<h2>" + value.excerpt + "</h2></a>";
        $('.hold').append(list);
        });

    });

});

Answer 1

您需要在alert

中使用escapq引号

更改此行

var list ="<a href='#' onclick='alert('hey!');'>"

到

var list ="<a href='#' onclick='alert(\'hey!\');'>"

Answer 2

在JS周围使用转义双引号

var list ="<a href='#' onclick=\"alert('hey!');\">"

Answer 3

在外部定义onclick事件，而不是将其定义为内联，如下所示

 jQuery(function ($) {
     var json={title:'title1'};
    $.each(json, function (i, value) {   
        var list ="<a href='#' onclick=\"alert('hey!');\">"
        +"<h1>" + value + "</h1>" ;
        $('.hold').append(list);
        });      
    });

Fiidle：https://jsfiddle.net/9qes9u8u/

根据@rzr回答更新了小提琴

https://jsfiddle.net/t8o56g28/

Answer 4

我会去委派活动：

var list ="<a href='#' class='link'>"

现在您可以使用此脚本，并且您不需要嵌套的doc ready块：

$.getJSON(categoryAddr,function(data){
    json=data;
    $.each(json, function (i, value) {
        var list ="<a href='#' data-id='" + value.id +"' class='link'>"
        +"<h1>" + value.title + "</h1>" 
        + "<img src='" + value.image + "' alt=''/>"
        +"<h2>" + value.excerpt + "</h2></a>";
        $('.hold').append(list);
    });  
});

这是新创建的锚点的委托事件：

 $('.hold').on('click', '.link', function(){
    alert($(this).data("id"));
 });

在json parse中添加函数onclick

4 个答案: