DOM manipulation does not work
<p>Yes I know, this title isn't really helpfull but this is the exact problem. For some reason (I don't know), I can't manipulate my HTML in the <em>beforeSend</em> Function of my AJAX-Request.</p>

<p>This is the HTML:</p>

<pre><code>&lt;div class="right"&gt;
    &lt;span id="observer-eye" original-title="Observe this Summoner" data-id="2"&gt;
        &lt;img alt="" src="/lolreports/img/icons/observer_eye.png"&gt;
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>And this is the AJAX-Request:</p>

<pre><code>$.ajax({
    type: 'post',
    dataType: 'json',
    url: webroot + 'summoners/observe',
    data: 'data[Summoner][id]=' + id,
    beforeSend: function(XMLHttpRequest) {
        $(this).parent().empty();
    },
    success: function(data) {
        if(data.status == 'success') {
            $(this).find('img').attr("src", webroot + 'img/icons/observed_eye.png"');
        }
    }
});
</code></pre>

<p>My goal is to put an ajax-loader.gif inside the -Tag which I wanted to do with $(this).find('img').attr("src", webroot + 'img/icons/ajax-loader.gif"'); - Nothing happened. I tested many ways to manipulate the image or the span, but nothing happens. I wondered if <em>beforeSend</em> gets ever executed, which I tested with an <em>alert()</em>. It worked. But no DOM manipulation. </p>

<p>I have no idea where to search, I hope you can help me.</p>
