Question

I am attempting to dynamically create the following using data from an array

<li><a href="#" class="red" id="5"><span>Some text</span></a></li>

At the moment, I’m creating it in a rather simple way

var link = '<li><a href="#" class="' + this.cssClass + '" id="' + this.id + '"><span>' +   this.text + '</span></a></li>';
$('#options').append(link);

Although I need a function to be run when the link is clicked, how is the best way to do this?

Answer 1

$('<a>').attr({
    id: this.id,
    href: '#'
}).addClass(this.cssClass).click(function() {

     // click event

}).html('<span>' + this.text + '</span>')
  .appendTo($('<li>').appendTo('#options'));