在jQuery中预先加入后可以进行点击操作

我有一个DIV，其中提供了一些代码。当我悬停在这个DIV上时，我想呈现一个按钮来切换代码块中的注释。到目前为止，我有这样的：在jQuery中预先加入后可以进行点击操作

$('.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(); });

当我将鼠标悬停在代码块被提出的跨度。但是当我点击创建的跨度时，什么都不会发生。即使我将点击功能更改为简单警报，也不会发生任何事情。

任何人有任何想法如何解决这个问题。

来源

2010-05-26 Saif Bechan

使用live()：

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

由于span是动态生成的，该click事件将无法正常工作，你需要live代替。

现场描述：

附加一个处理程序事件当前选择现在或将来匹配其所有元素。

来源

2010-05-26 10:55:36 Sarfraz

知道了！谢谢 – 2010-05-26 11:00:40

@Saif Bechan：You欢迎:) – Sarfraz 2010-05-26 11:01:29

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

来源

2010-05-26 10:54:50

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

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

完成。

来源

2010-05-26 10:55:35 karim79

如果用户prependTo您可以指定处理程序所产生的span

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

来源

2010-05-26 11:00:51 RoToRa

你应该只具有跨度已经在HTML，而不是用你的脚本插入它的。然后设置.hover()事件以删除`display：none`样式

这样你就不必担心每次都设置你的事件处理程序，而且你知道它会在大部分时间被插入，所以它在用户环境方面并不是真正的“动态”，就用户的行为而言，所以我认为“display：none”更合适，

来源

2010-05-26 11:05:13 Anthony

是的，这是真的，但是我必须在每个代码块中插入一个span，并且有很多这样的代码，所以动态插入的方法可以节省大量的时间。 – 2010-05-26 11:35:33

在jQuery中预先加入后可以进行点击操作

回答

相关问题