单击事件处理程序不起作用预先解析的 html

Question

我有一个从 html 模板解析的元素，我想向它添加一个点击事件，它似乎不起作用。

但是当我添加元素时

$('#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 文件和 result 数组的内容，并且从您的示例中也不清楚在哪里定义了 ID 为 close 的元素，我创建了我相信您正在经历的场景。

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