Question

Mega noob here so excuse me if this is a silly question or if it doesn’t make any sense.

I have a li list which I create dynamically from a mySQL database. The code for this looks like this:

var resultCount = 0;
var mxKey = $.now();

$.get("\\php\\phpGenre.php?mxKey"+mxKey, function(genreData){

    jsonResults = JSON.parse(genreData);

    while (resultCount<jsonResults.length){
        var genreName = jsonResults[resultCount]['genre_name'];
            $('#genreList').append('<li><a href="#" onclick="searchGenres(' + genreName + ');return false"><span>' + genreName + '</span></a></li>');
                resultCount++;
    }

});

When I create my list I also need to be able to add an onClick event which calls a function… this function uses the list name as a value and is generated via the variable genreName. My list gets created ok but the onClick event doesn’t work and keeps returning:

SCRIPT5009: 'Documentary' is undefined

or another example would be:

SCRIPT5009: 'Fantasy' is undefined 

Where ‘Documentary’ and ‘Fantasy’ are the genreName.

So my question is how can I include an onClick event to each list item which will use the genreName as the value?

If I hard code the list it works fine:

<ul><li><a href="#" onclick="searchGenres('action');return false"><span>Still To Do...</span></a></li></ul>

Thanks…. sorry once again for my poor coding knowledge.

Answer 1

youu need to escape ' your genrename since u want to send it as string.
try this

$('#genreList').append('<li><a href="#" onclick="searchGenres(\'' + genreName + '\');return false"><span>' + genreName + '</span></a></li>');