0

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.

saikiran
  • 2,247
  • 5
  • 27
  • 42

1 Answers1

1

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]

Shlomo
  • 3,763
  • 11
  • 16
  • I am doing the same except, i am prepending my $code to the existing element in an web site. i think there the problem is, i will try with your code and let you know – saikiran Nov 03 '14 at 14:00
  • Please look into the issue @Shlomo – saikiran Nov 05 '14 at 18:41
  • 1
    As mentioned, there isn't an issue with the method. It's likely something in your code that is causing the problem. If you provide the extension id, I'm happy to take a look. – Shlomo Nov 05 '14 at 19:13
  • any solutions you found @shlomo – saikiran Nov 06 '14 at 05:12
  • I tested your extension on Firefox 33.0.2/Win 8.1 and the click works (nice extension) and I see the links the extension is injecting. I can post an image here, but before I do so, if you prefer to keep this private please email support@crossrider.com and I can provide it there. – Shlomo Nov 06 '14 at 08:42
  • Thanks @Shlomo .. please mail me details on saikiranm@rocketmail.com. I am not getting it though :( . i am testing it on Firefox 33.0.2/ win 7. – saikiran Nov 06 '14 at 09:51