Question

I have a js function that recieves an array of items. The function itself creates html content dynamicly using a call to jquery html function. The problem is that I don’t remember how to embed correctly the array inside the appended html. For example,

var ErrorsNotifier = {
   init: function(items) {
        var template = '<div id="message">'; 
        template += '<div id="id">some message.<br /><br />'; 
        template += '<div class="errorsList">error desc</div></div>'; 
        template += '<a href="#" class="goback" onclick="ErrorsNotifier.Back("+items+");"></a>'; 
        template += '<a href="#" class="proceed" onclick="ErrorsNotifier.Next();"></a>'; 
        template += '<input type="image" src="someimage" alt="" class="" onclick="window.open("someurl");"/></div>'; 
        $("#content").html(template);
   }
}

After the html will be rendered to the body, clicking on the anchor tag return the following error – Uncaught SyntaxError: Unexpected identifier

inspecting the anchor tag in the browser will show the following

a href="#" class="goback" onclick="ErrorsNotifier.Back([object Object]);"

Answer 1

Try

var ErrorsNotifier = {
   init: function(items) {
       ...
       var $template = $(template);
       $template.find('a.goback').on('click', function(){ErrorsNotifier.Back(items);});
       $("#content").empty().append($template);
   }
}

notice I used .on() to attach the event handler.