add function onclick in json parse

Question

Im trying to load article from json (its works) and add it link to fucntion, but when I add the a href tag with onclick function (for example - alert), the function doesn't work.

what am I missing?

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

    });

});

check for errors when click on the link you are generating in the each loop — gurvinder372
– gurvinder372, Commented Feb 4, 2016 at 10:31
I mean when you click - there will be errors I'm almost positive — Jaromanda X
– Jaromanda X, Commented Feb 4, 2016 at 10:33
nothing happen when I click that is given since there is a unescaped quote. Can you check for errors in console (Browser console) when you click? — gurvinder372
– gurvinder372, Commented Feb 4, 2016 at 10:35

gurvinder372 · Accepted Answer · 2016-02-04 10:27:52Z

3

you need to escapq quotes inside the alert

change this line

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

to

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

answered Feb 4, 2016 at 10:27

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jai Over a year ago

That is why i don't like inline handlers. better to go for delegated events.

gurvinder372 Over a year ago

@Jai that is true, but OP is asking What am i missing :)

MayThrow · Accepted Answer · 2016-02-04 10:55:35Z

1

Use escaped double quotes around your JS

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

answered Feb 4, 2016 at 10:55

MayThrow

2,2014 gold badges25 silver badges40 bronze badges

Comments

SDK · Accepted Answer · 2016-02-04 10:57:53Z

0

Define onclick event outside instead of defining it inline as shown below

 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/

Updated Fiddle based upon @rzr answer

https://jsfiddle.net/t8o56g28/

edited Feb 4, 2016 at 10:57

answered Feb 4, 2016 at 10:45

SDK

1,5421 gold badge17 silver badges31 bronze badges

Comments

Jai · Accepted Answer · 2016-02-04 10:59:21Z

0

I would go for delegated events:

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

Now you can use this script, and you don't need to have a nested doc ready block:

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

This is delegated event on newly created anchor:

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

edited Feb 4, 2016 at 10:59

answered Feb 4, 2016 at 10:45

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

yoram Over a year ago

tnx! can I assign the alert var from json? for ex. alert(value.title)

Jai Over a year ago

Absolutely! But other way round like you can use data-* attribute to store it and alert it. Updating.

Collectives™ on Stack Overflow

add function onclick in json parse

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related