Why doesn't $(this) work inside a javascript function?
<p>I've attached an onlick event to a function. I want to reference the element being clicked from inside the function so I can change its inner HTML, but why is it not working? Is there any other way to reference the clicked element?</p>

<p><strong>HTML</strong> </p>

<pre><code>        &lt;div class="save_button" onclick="toggle_save_star(&lt;?php echo $listing-&gt;listing_id ?&gt;,'&lt;?php echo base_url()?&gt;')"&gt;
            &lt;?php if($listing-&gt;saved_element_id):?&gt;
            &lt;img src="&lt;?php echo site_url('images/core/icons/basic2/star1_16.png')?&gt;" /&gt;
            &lt;?php else:?&gt;
            &lt;img src="&lt;?php echo site_url('images/core/icons/basic2/star1_16_gray.png')?&gt;" /&gt;
            &lt;?php endif; ?&gt;
        &lt;/div&gt;
</code></pre>

<p><strong>Javascript Function</strong></p>

<pre><code>function toggle_save_star(element_id, site_url) {
    var url = site_url+"AJAX/ajax_default/modify_saved";
    var button = $(this);
    $.post(url,{action: 'toggle', element_id: element_id, type: 'listing' }, function(data) {
        if(data == 'saved') {
            $(button).html('&lt;img src="'+site_url+'images/core/icons/basic2/star1_16.png" /&gt;');
        }
        else{
            $(button).html('&lt;img src="'+site_url+'images/core/icons/basic2/star1_16_gray.png" /&gt;');
        }
    });
}
</code></pre>
