如何通过ajax获取修改后的属性？

Question

我有一个函数，通过ajax改变元素的数据属性。

下一次我想要得到相同元素的修改后的数据属性，但是我得到了前一个数据属性的值，尽管属性已经改变了。

那么，我做错了什么呢？

示例：

​

$(function(){
  $(".class1").on("click", function(){
     var attribute_data = $(this).data("attribute");
     $.ajax({
       ... // Handle
       success:function(data){
           $(this).data("attribute") === "2";
       }
     });
   }); 
  
  
  
  $(".class1").on("click",function(){
    var modified_attribute_data = $(this).data("attribute");
    console.log(modified_attribute_data); // will return "1" instead "2"
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1" data-attribute="1">
  Content
 </div>

​

Answer 1

如果您这样做了：

$(".class1").on("dblclick", function(){
      $(this).hide();
      var attribute_data = $(this).data("attribute");
      $.ajax({
         ... // Handle
         success:function(data){
         $(this).data("attribute") === "2";
         $(this).show();
      }
   });
});

然后单击：

  $(".class1").on("click",function(){
    var modified_attribute_data = $(this).data("attribute");
    console.log(modified_attribute_data); // will return "2"
  });

我建议将触发它的事件分开，或者以某种方式阻止其中一个，就像切换一个类一样……记住，ajax是异步的，所以不要期望它会立即改变……