.click() event not executing
<p><a href="http://jsfiddle.net/M6xdq/" rel="nofollow">http://jsfiddle.net/M6xdq/</a></p>

<p>What I want to achieve, is - when user clicks the "read more" link: </p>

<ol>
<li>it's removed</li>
<li>changes it's label to "read less"</li>
<li>this new "read less" link is added to next element of it's parent (readmore_holder)</li>
<li>"readmore_holder" is displayed;</li>
</ol>

<p>Then there should be the other part with "read less" to swap links back again and to hide <code>readmore_holder</code>, but since I cannot even get the <code>alert()</code> to show up, I'm kinda lost. </p>

<p><strong>What is the problem here?</strong></p>

<p>P.S. If there are ways of simplifying this snippet, would really appreciate it.</p>

<p>Thanks in advance!</p>

<p><strong>EDIT:</strong> Code from jsFiddle example.</p>

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

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

$('.toggleoff').click(function() {
    alert('works!');
});​
</code></pre>

<p>HTML</p>

<pre><code>&lt;p&gt;Headline is right here&lt;/p&gt;
&lt;p class="readmore_holder"&gt;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.&lt;/p&gt;​
</code></pre>
