我如何得到一个事件监听器的工作上的元素是添加到我的html通过javascript
How do I get an event listener to work on an element that is added to my html via javascript?
我通过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就是我所说的关闭按钮
您需要将click事件绑定到加载页面时存在于DOM中的元素,并委托动态添加的元素,如下所示:
$(document).on('click', '#close-video', function() {
...
});
你应该为最接近#close-video
的元素改变document
,这样它就不会冒泡到document
。
另外,在#close-video
单击处理程序之前是returning false;
,因此无论如何都不会执行代码。将其移出#content-overview li
单击处理程序
相关文章:
- 元素名称上带有短划线 (-) 字符的 Json 对象
- 在元素悬停上显示带有javascript的弹出式网站
- 没有获得基础's的Javascript元素工作(与Laravel和Elixir)
- 在ajax加载的元素jquery上包含现有的jquery函数
- 在元素集合上使用拼接
- 让 jquery 为 ajax 添加的元素工作的最佳方法是什么?
- 似乎无法获得'.focus()'元素工作.
- 如何在元素列表上使用jquery选择器
- jQuery-悬停在动态创建的元素setTimeout上
- 如何使工具提示从函数本身之外的元素工作
- dc.js:如何在对象元素列表上减少计数
- 确保 JavaScript 中 shuffle 之后的第一个元素与上一个 shuffle 中的最后一个元素不同
- 元素边框上的 HTML 鼠标悬停事件
- 在元素指令上添加 css
- AngularJS - ngRepeat.在 ng 重复重新渲染后,需要将焦点集中在相同的元素事件上
- 角度:在元素指令上添加属性指令
- 为什么不在DOM元素函数上应用工作呢?
- 我如何得到一个事件监听器的工作上的元素是添加到我的html通过javascript
- JavaScript监视事件不能在DOM元素对象上工作
- 为什么脚本不写在元素本身上就不能工作