Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/446.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何让事件侦听器处理通过javascript添加到html中的元素?_Javascript_Jquery_Event Handling - Fatal编程技术网

如何让事件侦听器处理通过javascript添加到html中的元素?

如何让事件侦听器处理通过javascript添加到html中的元素?,javascript,jquery,event-handling,Javascript,Jquery,Event Handling,我正在通过javascript向文档中添加一些HTML。我还通过这个javascript函数向HTML添加了一个按钮。我希望这个按钮有一个事件监听器,但这在添加了javascript的元素上似乎不起作用。有可能解决这个问题吗 我的js: $('#content-overview li').on('click',function(){ // Clear previous videos $('.content-overview-row').remov

我正在通过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");
            });
    });
$('content overview li')。在('click',function()上{
//清除以前的视频
$('.content overview行').remove();
//插入新视频
var vimeoId=$(this.data('vimeo');
var html='
  • ; //查找行尾并插入详细视图 var nextRow=$(this).nextAll('.first-in-row:first'); if(nextRow.is('li')){ nextRow.before(html); } 否则{ //最后一排 if($(this).hasClass('first-in-row')) { //最后一行中单击的第一项 $(此).before(html); } 否则{ $(this).prevAll('.first-in-row:first')。在(html)之前; } } 返回false; $(“#关闭视频”)。单击(函数(){ 控制台日志(“工作”); }); });

    close video是我所说的close按钮。加载页面时,需要将click事件绑定到DOM中存在的元素,并委托动态添加的元素,如下所示:

    $(document).on('click', '#close-video', function() {
       ...
    });
    
    您应该为最靠近您的
    的元素更改
    文档
    #关闭视频
    ,这样它就不必一直冒泡到
    文档


    另外,您正在
    返回false#关闭视频
    之前单击处理程序,这样代码就永远不会执行。将其移到
    #内容概述li
    单击处理程序之外。

    在调用
    之前,您的函数将返回。单击()
    您的答案解决了我的问题。非常感谢:)