.click()事件未执行

Question

http://jsfiddle.net/M6xdq/

我想要实现的是 - 当用户点击"阅读更多"链接时:

1. 它被删除了
2. 将其标签更改为"少读"
3. 这个新的"少读"链接被添加到它的父元素的下一个元素中(readmore_holder)
4. 显示"readmore_holder";

然后应该有另一部分"少阅读"再次交换链接并隐藏readmore_holder,但由于我甚alert()至无法显示,我有点失落.

这里有什么问题？

PS如果有简化这个片段的方法,我会非常感激.

提前致谢!

编辑:来自jsFiddle示例的代码.

$('.readmore_holder').hide();
$('.readmore_holder').prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>');

$('.toggleon').click(function() {     
    $(this).parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>');
    $(this).parent().next().fadeIn();        
    $(this).remove();        
});

$('.toggleoff').click(function() {
    alert('works!');
});?

HTML

<p>Headline is right here</p>
<p class="readmore_holder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget suscipit ante. Pellentesque egestas varius dolor, sit amet blandit erat luctus quis. Nunc semper odio a orci vulputate ut pulvinar mi consequat. Praesent molestie accumsan velit, nec vehicula velit mattis vitae. Proin libero mauris, ultrices eu congue quis, sollicitudin et eros. Phasellus tortor mauris, imperdiet in euismod ut, tempor id ante.</p>?

Answer 1

您需要将该live()方法用于动态生成的内容.请参阅此处的工作演示