Question

如果ajax响应成功，我想替换当前标记

$('.glyphicon-eye-close').click(function() {
          var v = this.id;
          $.ajax({
              type: 'GET',
              url: 'hide.html',
              data: { 
                  bookId: v ,
              },
              success: function(response) {
                  if (response == 'success') {
                      $(this).replaceWith('<span id="' + v + '" class="glyphicon glyphicon-eye-open"></span>');
                  }
              }
          });
      });

但它不起作用。问题是什么？

Answer 1

成功函数中不存在$(this)的范围。您可以在变量v中使用以前的商店ID值将其用作选择器：

$('#'+v).replaceWith('<span id="' + v + '" class="glyphicon glyphicon-eye-open"></span>');

此外，定义的单击处理程序不适用于动态添加的元素（在您的情况下使用repalceWith（））。您需要事件委派才能使点击处理程序对它们起作用。

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$('body').on('click','.glyphicon-eye-close',function() {
   //rest code
});

Answer 2

您是否检查了成功回调中$（this）的内容？我认为这不是你认为的。

Answer 3

使用$(this)元素的引用在ajax上下文中是不可用的，在ajax调用之外的变量中存储元素的引用并在ajax中使用变量：

var element = $(this);

然后：

element.replaceWith('<span id="' + v + '" class="glyphicon glyphicon-eye-open"></span>');

这样做：

$('.glyphicon-eye-close').click(function() {
          var element = $(this);
          var v = this.id;
          $.ajax({
              type: 'GET',
              url: 'hide.html',
              data: { 
                  bookId: v ,
              },
              success: function(response) {
                  if (response == 'success') {
                      element.replaceWith('<span id="' + v + '" class="glyphicon glyphicon-eye-open"></span>');
                  }
              }
          });
      });

Answer 4

在这种情况下，这指向ajax对象尝试定义上下文。

$('.glyphicon-eye-close').click(function() {
          var v = this.id;
          var self = this;
          $.ajax({
              type: 'GET',
              url: 'hide.html',
              data: { 
                  bookId: v ,
              },
              success: function(response) {
                  if (response == 'success') {
                      $(self).replaceWith('<span id="' + v + '" class="glyphicon glyphicon-eye-open"></span>');
                  }
              }
          });
      });

Answer 5

$.ajax上有一个选项：

$.ajax({
    context: this, //<< Here, set context of any callback method
    type: 'GET',
    url: 'hide.html',
    data: {
        bookId: v,
    },
    success: function (response) {
        if (response == 'success') {
            $(this).replaceWith('<span id="' + v + '" class="glyphicon glyphicon-eye-open"></span>');
        }
    }
});

--DOC--

context 类型：PlainObject此对象将成为所有对象的上下文与Ajax相关的回调。默认情况下，上下文是一个对象表示调用中使用的ajax设置（$ .ajaxSettings合并将设置传递给$ .ajax）。例如，指定DOM 元素作为上下文将使完整的上下文回叫请求

Answer 6

我认为你的范围有问题。在你的情况下$（this）是成功＆＃39;功能。尝试在开头使用var me = this，然后使用me代替此

Answer 7

您需要在ajax（）参数中设置ajax回调的上下文。

$.ajax({
  context: this,
  type: 'GET', //etc...

此外，您需要确保您的ajax URL确实返回“成功”值。如果您期望ajax请求的状态，则需要定义成功回调函数的第二个参数，然后针对该条件运行条件。您可以使用console.log（）进行验证：

success: function(response) {
  console.log(repsonse);
  if (response == 'success') {//etc...

这是一个有效的演示：http://jsfiddle.net/ECQU3/

replaceWith不起作用

7 个答案:

--DOC--