我如何得到一个事件监听器的工作上的元素是添加到我的html通过javascript

Question

我通过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就是我所说的关闭按钮

Answer 1

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

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

你应该为最接近#close-video的元素改变document，这样它就不会冒泡到document。

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