javascript - this keyword within AJAX request jQuery - Stack Overflow

admin管理员组

文章数量:1291009

On click I change the css of the selected div like this:

$(".like-grid-span").click(function() {

  if ($(this).css('color') == "rgb(0, 0, 0)") {
    $(this).css({
      color: 'blue',
      transition: 'all .45s'
    });
    $('.like-count').html(data);
    $(this).prop('title', 'Rated as Good');
  } else {
    $(this).css({
      color: 'rgb(0, 0, 0)',
      transition: 'all .45s'
    });
    $(this).prop('title', 'Rate as Good');
  }

});

I just introduced ajax request within the onclick function and added the rest of the code within the success call back, but my this keyword (that was refering to the current selected div) is not working now, I know it may be refering to ajax function now but how can I still use this to refer the selected div? Or is there any alternative?

$(".like-grid-span").click(function() {
  var selected_offer_id = $(this).closest("ul.amenities").data('id');
  $.ajax({
    url: "/apexrealestates/goods/goodmechanism.php",
    type: "POST",
    data: {
      user_id: 1,
      offer_id: selected_offer_id
    },
    success: function(data) {
      if ($(this).css('color') == "rgb(0, 0, 0)" && data != false) {
        $(this).css({ // this is the my this keyword I'm talking about
          color: 'blue',
          transition: 'all .45s'
        });
        $('.like-count').html(data);
        $(this).prop('title', 'Rated as Good');
      } else {
        $(this).css({
          color: 'rgb(0, 0, 0)',
          transition: 'all .45s'
        });
      }
    },
    error: function(data) {
      alert("phat gea");
    }
  });



});

Here is my html:

<div class="row">
  <div class="listing_tile item col-sm-4">
    <div class="options">
      <a data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body" type="button" data-html="true" href="#" id="login">Login</a>
      <div id="popover-content" class="hide">
      </div>
    </div>
    <div class="image">
      <a href="./property/detail.php">
        <span class="btn btn-default"><i class="fa fa-file-o"></i> Take a Look</span>
      </a>
      <img src="img/property2.jpg" alt="" />
    </div>
    <div class="favt-grid-div" title="Add to Wishlist">
      <i class="fa fa-star"></i>
    </div>
    <div class="price">
      <i class="fa fa-home"></i>For Sale
      <span>PKR 2500000</span>
    </div>
    <div class="info">
      <h3 class="text-center">
                <a href="#">Apartment in Bahria</a>
                <small><?= getExcerpt('556-Safari villas bahria town Lahore'); ?></small>
            </h3>
      <h4 class="text-center text-danger"><b>Lahore</b></h4>
      <ul class="amenities" data-id="2">
        <li><i class="fa fa-arrows"></i> 45 Sq-Ft</li>
        <li title="click to Rate"><span class="like-grid-span"><i class="fa fa-thumbs-o-up"></i></span><span class="like-count">26</span> Likes</li>
      </ul>
    </div>
  </div>
</div>

Help would be appriciated, thanks.

On click I change the css of the selected div like this:

$(".like-grid-span").click(function() {

  if ($(this).css('color') == "rgb(0, 0, 0)") {
    $(this).css({
      color: 'blue',
      transition: 'all .45s'
    });
    $('.like-count').html(data);
    $(this).prop('title', 'Rated as Good');
  } else {
    $(this).css({
      color: 'rgb(0, 0, 0)',
      transition: 'all .45s'
    });
    $(this).prop('title', 'Rate as Good');
  }

});

I just introduced ajax request within the onclick function and added the rest of the code within the success call back, but my this keyword (that was refering to the current selected div) is not working now, I know it may be refering to ajax function now but how can I still use this to refer the selected div? Or is there any alternative?

$(".like-grid-span").click(function() {
  var selected_offer_id = $(this).closest("ul.amenities").data('id');
  $.ajax({
    url: "/apexrealestates/goods/goodmechanism.php",
    type: "POST",
    data: {
      user_id: 1,
      offer_id: selected_offer_id
    },
    success: function(data) {
      if ($(this).css('color') == "rgb(0, 0, 0)" && data != false) {
        $(this).css({ // this is the my this keyword I'm talking about
          color: 'blue',
          transition: 'all .45s'
        });
        $('.like-count').html(data);
        $(this).prop('title', 'Rated as Good');
      } else {
        $(this).css({
          color: 'rgb(0, 0, 0)',
          transition: 'all .45s'
        });
      }
    },
    error: function(data) {
      alert("phat gea");
    }
  });



});

Here is my html:

<div class="row">
  <div class="listing_tile item col-sm-4">
    <div class="options">
      <a data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body" type="button" data-html="true" href="#" id="login">Login</a>
      <div id="popover-content" class="hide">
      </div>
    </div>
    <div class="image">
      <a href="./property/detail.php">
        <span class="btn btn-default"><i class="fa fa-file-o"></i> Take a Look</span>
      </a>
      <img src="img/property2.jpg" alt="" />
    </div>
    <div class="favt-grid-div" title="Add to Wishlist">
      <i class="fa fa-star"></i>
    </div>
    <div class="price">
      <i class="fa fa-home"></i>For Sale
      <span>PKR 2500000</span>
    </div>
    <div class="info">
      <h3 class="text-center">
                <a href="#">Apartment in Bahria</a>
                <small><?= getExcerpt('556-Safari villas bahria town Lahore'); ?></small>
            </h3>
      <h4 class="text-center text-danger"><b>Lahore</b></h4>
      <ul class="amenities" data-id="2">
        <li><i class="fa fa-arrows"></i> 45 Sq-Ft</li>
        <li title="click to Rate"><span class="like-grid-span"><i class="fa fa-thumbs-o-up"></i></span><span class="like-count">26</span> Likes</li>
      </ul>
    </div>
  </div>
</div>

Help would be appriciated, thanks.

• javascript
• jquery
• html
• ajax

Share Improve this question Follow asked May 22, 2015 at 9:44 SubhanSubhan 1,63433 gold badges2727 silver badges6060 bronze badges 1

• 1 assign this to another variable before calling ajax like reference = this; – user2009750 Commented May 22, 2015 at 9:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Pass option context of $.ajax() method:

$.ajax({
    context: this,
    //...
});

Store this reference in a variable, then use it in success callback method

$(".like-grid-span").click(function() {
    var _self = $(this); //Store reference
    $.ajax({
        success: function(data) {
            //Use the variable
            _self.css({ });
        }
      });
});

Additionally you can use context, it sets the value of this in the callbacks.

$.ajax({
    context: this,
});

EDIT, Unbind and bind click handler

function likeClickHandler() {
    var _self = $(this);

    //Unbind click handler
    _self.off('click')

    $.ajax({
        success: function(data) {
            //Use the variable
            _self.css({
            });

            //Bind Click handler
            _self.on('click', likeClickHandler);
        }
      });
}

$(".like-grid-span").on('click', likeClickHandler);

Assign this to a variable like

$(".like-grid-span").click(function() {...

     var self = this;

Then use self everywhere else.

assign $(this) object to javascript variable.

 var thisOBJ;
 $(".like-grid-span").click(function() {
    thisOBJ = $(this);
    // success function 
    success: function(data) {
    if (thisOBJ.css('color') == "rgb(0, 0, 0)" && data != false) {
        thisOBJ.css({ // this is the my this keyword I'm talking about
         color: 'blue',
        transition: 'all .45s'
       });
 });

本文标签： javascriptthis keyword within AJAX request jQueryStack Overflow