Click event handler not working prepend parsed html

I have a element parsed from html template and i want to add a click event to it, it seems not working.

but when i add element like

$('#formatMe').click();

Here click is working but when

var formats = appAPI.resources.parseTemplate("formats.html",result);
$code=$(formats);
$('#vid_div').prepend($code);

But not on element from parseTemplate

I am writing click function in appAPI.ready like below

appAPI.ready(function($) {

  $("#user-header").append("<div id='formatMe'>Download</div>");

  $('#some-div-in-web-site').append("<div id='vid_div'></div>");

            $('#formatMe').click(function(){

            var url="myurl";

            appAPI.request.get({
                url: url,
                onSuccess: function (data) {

                 var result=appAPI.JSON.parse(data);

                 var formats = appAPI.resources.parseTemplate("formats.html",result);

                    $('#vid_div').html('');
                    $code=$(formats);
                  $('#vid_div').prepend($code);
                }
            });
    });


  $('#close').click(function(){

      alert("dont'click on me!!!");
  });


});

Formats.html is like this

<div id="vid_formats">
    <div id="close">&times;</div>

    <div class="wrapper">
     <h1>Download Links</h1>
        <ul>
            <% for (var i=0; i<vids.length; i++) { %>
            <li>
                <a id="format" href="<%=vids[i]['url'] %>"><%=vids[i]['type']%> &nbsp;&nbsp;<%=vids[i]['quality']%> - <%=vids[i]['size']%> </a>
            </li>
            <% } %>
        </ul>
    </div>
</div>

Still not able to fire click event, i am testing in firefox.

Solution

Foreword: Since the contents of the formats.html file and result array are not provided and it's also not clear from your example where the element with id close is defined, I created the scenario that I believe you are experiencing.

In the scenario I recreated, the click event handler worked as expected and I can see the alert. The following are the extension files I recreated and then tested in Chrome.

formats.html:

<div>
    <ul>
        <% for (var i=0; i<sites.length; i++) { %>
            <li><a href="<%=sites[i].url%>"><%=sites[i].name%></a></li>
        <% } %>
    </ul>
</div>
<div id="close">Close</div>

extension.js:

appAPI.ready(function($) {
    var result = {
            sites:[
                {url:'  http://cnn.com ', name:'cnn'},
                {url:'  http://yahoo.com ', name:'yahoo'}
            ]
        },
        formats = appAPI.resources.parseTemplate("formats.html",result);

    $('<div id="player"></div>').prependTo('body');
    $code=$(formats);
    $('#player').prepend($code);
    $('#close').click(function(){
        alert('clicked me');
    });
});

[Disclosure: I am a Crossrider employee]