我有一个DIV,其中提供了一些代码。当我将鼠标悬停在这个DIV上时,我想要一个按钮来切换代码块中的注释。到目前为止,我有这个:
$('.code-block').hover(
function(){
$(this).prepend('<span class="code-block-control">toggle comments</span>');
},
function(){
$('.code-block-control',this).remove();
}
);
$('.code-block-control').click( function(){ $('.comment').toggle(); } );
当我将鼠标悬停在代码块上时会显示跨度。但是,当我单击创建的跨度时,没有任何反应。即使我将点击功能更改为简单警报也没有任何反应。
任何人都知道如何解决这个问题。
答案 0 :(得分:1)
使用 live()
:
$('.code-block-control').live('click', function(){
$('.comment').toggle();
});
由于动态生成了span
,click
事件无效,您需要live
。
直播说明:
为所有人附加一个处理程序 与当前相匹配的元素 选择器,现在或将来。
答案 1 :(得分:0)
您必须再次调用侦听器迭代器;迭代器只影响当时已存在的节点。
答案 2 :(得分:0)
使用event delegation,jQuery提供live
和delegate
:
$('.code-block-control').live("click", function(){ $('.comment').toggle(); } );
完成。
答案 3 :(得分:0)
如果您是用户prependTo
,则可以将处理程序分配给生成的span
$('<span class="code-block-control">toggle comments</span>').
click( function(){ $('.comment').toggle(); } ).
prependTo(this);
答案 4 :(得分:0)
您应该只在HTML中使用span,而不是将其与脚本一起插入。然后设置.hover()
事件以删除`display:none“样式。
这样您就不必担心每次都设置事件处理程序。另外你知道它会在大多数时候被插入,所以就用户的上下文来说,它并不是真正的“动态”,只是在用户的行为方面,所以做“display:none”更合适。