0

我正在通过 javascript 向我的文档添加一些 HTML。我还通过这个 javascript 函数向我的 HTML 添加了一个按钮。我希望这个按钮有一个事件监听器，但这似乎不适用于使用 javascript 添加的元素。有可能解决这个问题吗？

我的js：

$('#content-overview li').on('click',function(){

            // Clear previous videos
            $('.content-overview-row').remove();

            // Insert new video
            var vimeoId = $(this).data('vimeo');            
            var html = '<li class="content-overview-row"><div class="content-overview-video"><iframe src="http://player.vimeo.com/video/'+vimeoId+'" width="950" height="534"></iframe><a id="close-video"></a></div></li>';

            // Find end of row and insert detailed view
            var nextRow = $(this).nextAll('.first-in-row:first');

            if(nextRow.is('li')){
                nextRow.before(html);   
            }
            else{
                //last row
                if($(this).hasClass('first-in-row'))
                {
                    //first item clicked in last row
                    $(this).before(html);
                }
                else{
                    $(this).prevAll('.first-in-row:first').before(html);
                }
            }           

            return false;

            $('#close-video').click(function() {
                console.log("works");
            });
    });

close-video 是我正在谈论的关闭按钮。

4

1 回答 1

2

您需要在页面加载时将 click 事件绑定到 DOM 中存在的元素，并委托动态添加的元素，如下所示： 

$(document).on('click', '#close-video', function() {
   ...
});

您应该更改document最接近您的元素，#close-video这样它就不必冒泡到document.

此外，您returning false;在#close-video单击处理程序之前，因此无论如何都不会执行该代码。将其移到您的#content-overview li点击处理程序之外。

于 2013-04-26T07:22:15.957 回答