Question

我有一个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(); } );

当我将鼠标悬停在代码块上时会显示跨度。但是，当我单击创建的跨度时，没有任何反应。即使我将点击功能更改为简单警报也没有任何反应。

任何人都知道如何解决这个问题。

Answer 1

使用 live() ：

$('.code-block-control').live('click', function(){
  $('.comment').toggle();
});

由于动态生成了span，click事件无效，您需要live。

直播说明：

为所有人附加一个处理程序与当前相匹配的元素选择器，现在或将来。

Answer 2

您必须再次调用侦听器迭代器;迭代器只影响当时已存在的节点。

Answer 3

使用event delegation，jQuery提供live和delegate：

$('.code-block-control').live("click", function(){ $('.comment').toggle(); } );

完成。

Answer 4

如果您是用户prependTo，则可以将处理程序分配给生成的span

$('<span class="code-block-control">toggle comments</span>').
  click( function(){ $('.comment').toggle(); } ).
    prependTo(this);

Answer 5

您应该只在HTML中使用span，而不是将其与脚本一起插入。然后设置.hover()事件以删除`display：none“样式。

这样您就不必担心每次都设置事件处理程序。另外你知道它会在大多数时候被插入，所以就用户的上下文来说，它并不是真正的“动态”，只是在用户的行为方面，所以做“display：none”更合适。

在jQuery中添加后可以使span可单击

5 个答案: