如何让事件侦听器处理通过javascript添加到html中的元素?
我正在通过javascript向文档中添加一些HTML。我还通过这个javascript函数向HTML添加了一个按钮。我希望这个按钮有一个事件监听器,但这在添加了javascript的元素上似乎不起作用。有可能解决这个问题吗 我的js:如何让事件侦听器处理通过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
$('#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
单击处理程序之外。在调用之前,您的函数将返回。单击()
您的答案解决了我的问题。非常感谢:)