CODEWITHSUNDEEP
javascriptjquery
emkay
emkay

Reputation: 901

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

Upvotes: 0

Views: 124

Answers (4)

Christian
Christian

Reputation: 552

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

Upvotes: 2

cpeele00
cpeele00

Reputation: 893

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>

Upvotes: 0

jfriend00
jfriend00

Reputation: 708056

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

Upvotes: 0

user800014
user800014

Reputation:

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

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

Upvotes: 4

Related Questions