Question

我有一个从html模板解析的元素，我想向它添加一个click事件，它似乎无效。

但是当我添加像

这样的元素时

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

此处点击工作但

时

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

但不是来自parseTemplate的元素

我正在appAPI.ready中编写点击功能，如下所示

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就像这样

<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>

仍然无法触发点击事件，我正在使用Firefox进行测试。

Answer 1

前言：由于未提供 formats.html 文件和结果数组的内容，因此也不清楚从您的示例中定义了id close 的元素，我创建了我认为您遇到的场景。

在我重新创建的场景中，点击事件处理程序按预期工作，我可以看到警报。以下是我重新创建并在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');
    });
});

[披露：我是Crossrider员工]

点击事件处理程序不工作前置解析的html

1 个答案: