Why doesn't $(this) work inside a javascript function?

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?

HTML

        <div class="save_button" onclick="toggle_save_star(<?php echo $listing->listing_id ?>,'<?php echo base_url()?>')">
            <?php if($listing->saved_element_id):?>
            <img src="<?php echo site_url('images/core/icons/ba开发者_如何学Csic2/star1_16.png')?>" />
            <?php else:?>
            <img src="<?php echo site_url('images/core/icons/basic2/star1_16_gray.png')?>" />
            <?php endif; ?>
        </div>

Javascript Function

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('<img src="'+site_url+'images/core/icons/basic2/star1_16.png" />');
        }
        else{
            $(button).html('<img src="'+site_url+'images/core/icons/basic2/star1_16_gray.png" />');
        }
    });
}

---

I think in this case "this" don't reference to the div. You should try:

$('.save_button').click(function(){
  $(this)...
});

---

Try $("#"+element_id) instead. $(this) isn't working because you're not running this function as a method on an object.

Improving on the other answers, try this:

$(".save_button").click(function(){
toggle_save_star(element_id, site_url, $(this));
});

and in your function, the third new argument (called "target", let's say) could be used like this:

var button = target;

then use button like button.html(...);

---

The main problem here is that when you assign a string to onclick in your markup as in:

<div class="save_button" onclick="toggle_save_star..."

then, the code in the quotes gets evaluated by eval() and the this pointer will be set to point to the window object, not to the object that generated the click. If you want this set appropriately, then you can't assign the onclick handler in the markup, you would need to do it with JS as in:

$(".save_button").click();

or some other way in code.

In addition, there's a coding error in your toggle_save_star function.

Your button variable is already a jQuery object so you don't need to try to make it into another one with $(button). If you were going to use that function, you would have to change it to this:

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('<img src="'+site_url+'images/core/icons/basic2/star1_16.png" />');
        }
        else{
            button.html('<img src="'+site_url+'images/core/icons/basic2/star1_16_gray.png" />');
        }
    });
}

---

You would be better off removing the onclick from your div and going with something like the following:

http://jsfiddle.net/cpeele00/epD3v/

This allows you access the clickable item, in this case 'save_button'.

Then, at the bottom of your page (before you reach the closing body tag, insert your script there).

<script>

  $(document).ready(function(){

  //CALL THE FUNCTION HERE           


  //DEFINE THE FUNCTION HERE (see the jsFiddle link above)

  });

</script>
</body>