Change an element when an event occurs
<p>I want to change the element an event is attached to. In the below example I try to increase the border from 2px to 10 px without success.</p>

<p>Complete minimal example (look for the FAILS row):</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Example&lt;/title&gt;
    &lt;style&gt;P { margin-bottom: 40%; }&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Paragraph 1&lt;/p&gt;
    &lt;p&gt;Paragraph 2&lt;/p&gt;
    &lt;p&gt;Paragraph 3&lt;/p&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;

$('p').each(function (i) {
    $(this).css('border', '2px solid');

    $(window).scroll(function (event) {
        console.log('scroll triggered, but nothing happens!');
        event.target.css('border', '10px solid'); // FAILS with TypeError: event.target.css is not a function
    });
})

    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
