使用$ this與Ajax調用成功處理程序

我有一個用PHP生成的列表，看起來像下面的HTML代碼。我的AJAX呼叫成功完成，問題是我的狀態消息僅顯示在列表中的第一個div，我希望根據點擊哪個input框來顯示。所以我需要一個this參考#status_message，但我不知道如何使用它。

編輯：改變ID類

HTML：

<input type='textbox' class='update'> 
<div class='status_message'> </div> 

<input type='textbox' class='update'> 
<div class='status_message'> </div> 

<input type='textbox' class='update'> 
<div class='status_message'> </div>

的jQuery：

$(document).ready(function() { 
    $('.update').live('click', function() { 
     $.ajax({ 
      type : 'GET', 
      url: '', 
      dataType : 'json', 
      data: dataString , 
      error : function(XMLHttpRequest, textStatus, errorThrown) { 
       $('#status_message').removeClass().addClass('error').text('There was an error.').show(200); 
      }, 
      success : function(data) { 
       console.log(data); 
       if (data.error === true) { 
        $('.status_message').removeClass().addClass('success').text(data.msg); 
       } 
       else { 
        $('.status_message').removeClass().addClass('failure').text(data.msg); 
       } 
      } 
     });  
     return false; 
    }); 
});

來源

2012-12-03 Amanda Sky

您不能在具有相同ID的網頁中使用多個元素。 –

@JayBlanchard說什麼 - 將id更改爲一個類，然後設置。 –

更改爲類仍然相同的問題。 –

你可以試着呼喚你的AJAX功能之前保存點擊的元素：

$(document).ready(function() { 
    $('.update').live('click', function() { 
     var status_message = $(this).next('.status_message'); 
     $.ajax({ 
      type : 'GET', 
      url: '', 
      dataType : 'json', 
      data: dataString , 
      error : function(XMLHttpRequest, textStatus, errorThrown) { 
       status_message.removeClass().addClass('error').text('There was an error.').show(200); 
      }, 
      success : function(data) { 
       console.log(data); 
       if (data.error === true) { 
        status_message.removeClass().addClass('success').text(data.msg); 
       } 
       else { 
        status_message.removeClass().addClass('failure').text(data.msg); 
       } 
      } 
     });  
     return false; 
    }); 
});

來源

2012-12-03 21:50:03 Kyle

您需要存儲到被點擊的元素的引用。試試這個：

$('.update').live('click', function() { 
    var $currentEl = $(this); 
    $.ajax({ 
     // setup... 
     success : function(data) { 
      console.log(data); 
      var className = data.error ? 'failure' : 'success'; 
      $currentEl.next().removeClass().addClass(className).text(data.msg); 
     } 
    });  
    return false; 
});

來源

2012-12-03 21:48:05

是的，謝謝這就是我一直在尋找！ –

$.ajax({ 
    // setup... 
    context: this, 
    success : function(data) { 
     var class data.error ? 'success' : 'failure'; 
     $(this).removeClass().addClass(class).text(data.msg); 
    } 
});

參考：

api.jquery.com/jQuery.ajax/

來源

2012-12-03 21:55:12

使用$ this與Ajax調用成功處理程序

回答

相關問題