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

Question

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/basic2/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" />');
        }
    });
}

user800014 · Accepted Answer · 2011-09-23 19:57:07Z

4

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

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

answered Sep 23, 2011 at 19:57

user800014

Sign up to request clarification or add additional context in comments.

1 Comment

emkay Over a year ago

Maybe I'm mistaken, but wouldn't this force me to move the code inside all the relevant html pages? If not, how would I pass the two arguments if it was written this way?

Christian · Accepted Answer · 2011-09-23 20:27:24Z

2

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(...);

edited Sep 23, 2011 at 20:27

answered Sep 23, 2011 at 19:56

Christian

5521 gold badge5 silver badges12 bronze badges

Comments

jfriend00 · Accepted Answer · 2011-09-23 20:14:28Z

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" />');
        }
    });
}

cpeele00 · Accepted Answer · 2011-09-23 20:25:56Z

0

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>

answered Sep 23, 2011 at 20:25

cpeele00

8934 gold badges15 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related