ajax完成後重置一個函數

Question

我有一個小問題，我試圖用jQuery創建一個內聯編輯系統。所以當用戶點擊一個表格字段時，innerhtml將會隨着表格字段的內容而變成一個輸入字段。 Onblur這個輸入字段保存在一個mysql數據庫中，innerhtml變回新的內容。我希望用戶多次編輯相同的文本。如果我使用.live('click',function(){});每次用戶單擊表格字段時都會添加輸入，因此我得到的輸入將由輸入替換爲最後一個輸入的值。非常討厭，我使用.one函數解決了這個問題，但現在用戶只能編輯每個表格一次！在ajax調用完成之前是否有辦法禁用直播活動？

jQuery的

$(document).ready(function(){ 
var id = 0; 
$('table.editable td').one('click', function(event) {  

    var content = $(this).html(); 
    id = $(this).parent().find('.id').val(); 
    var class = $(this).attr('class'); 

    $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>'); 

    $(this).unbind(event); 
}); 

$('#editablefield').live('blur', function() { 
    var value = $(this).val(); 
    var name = $(this).attr('name'); 
    $.ajax({ 
     type: "POST", 
     url: "modules/Events/ajax/saveField.php", 
     data: "id="+id+"&val="+value+"&type="+name, 
     success: function(data) { 
      var data = data; 
      alert(data); 
     }, 
     error: function(request, status, error) { 
      alert(request.responseText); 
     } 
    }); 

    $(this).parent().html(value); 
}); 

}); 

前端

<?php 
$query = "SELECT * FROM mod_events"; 
$result = mysql_query($query) or die(mysql_error()); 



echo "<table class='editable'>"; 

echo "<tr>"; 
echo "<th></th>"; 
echo "<th>Event</th>"; 
echo "<th></th>"; 
echo "<th></th>"; 
echo "<th></th>"; 
echo "<th>Capacity</th>"; 
echo "</tr>"; 

while($row = mysql_fetch_assoc($result)) { 

    echo ("<tr>"); 
    echo ("<td>"); 
    echo ("<input type='hidden' value='".$row['event_id']."' class='id'>"); 
    echo ("</td>"); 
    echo ("<td colspan='4' class='event_name'>"); 
    echo ($row['event_name']); 
    echo ("</td>"); 
    echo ("<td class='event_capacity'>"); 
    echo ($row['event_capacity']); 
    echo ("</td>"); 

    echo ("</tr>"); 

} 

echo "</table>"; 
?> 

及AJAX腳本

<?php 
require_once('../../../../config.php'); 
require_once("../../../../inc/dbconnect.php"); 

$id  = mysql_real_escape_string($_POST['id']); 
$value = mysql_real_escape_string($_POST['val']); 
$field = mysql_real_escape_string($_POST['type']); 

$query = "UPDATE mod_events SET ".$field." = '".$value."' WHERE event_id = ".$id; 

echo mysql_query($query); 


?> 

希望你們能幫助我了！

Answer 1

你可以檢查是否已經有此表單元格像這樣的輸入：

$('table.editable td').click(function(event) {  
    if ($('input',this).length == 0) { //check if there is already an input? 
     var content = $(this).html(); 
     id = $(this).parent().find('.id').val(); 
     var class = $(this).attr('class'); 

     $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>'); 

     // $(this).unbind(event); // this shouldn't be needed anymore. 
    } 
}); 

，以避免aularons註釋中描述的問題：

，但可能會導致這種情況：用戶點擊進行編輯，將數據更改爲555，發出請求但尚未完成，然後用戶將數據更改爲333，現在該請求變得更快（首先被路由到某個緩慢的地方或由於某種原因被重新發送數據包），現在用戶將在該字段中看到333，而在服務器上它將是555，因爲這是555請求rrived而請求正在運行，然後再結合333我所做的是解除綁定後：jsfiddle.net/eDJqL - aularon

您需要更改像下面的代碼。

$('#editablefield').live('blur', function() { 
    var value = $(this).val(); 
    var name = $(this).attr('name'); 
    var cell = $(this).closest('td'); 
    cell.data('request-running', true); // set data to remember request is running 
    $.ajax({ 
     type: "POST", 
     url: "modules/Events/ajax/saveField.php", 
     data: "id="+id+"&val="+value+"&type="+name, 
     success: function(data) { 
      cell.data('request-running', false); // mark finished ajax call 
      var data = data; 
      alert(data); 
     }, 
     error: function(request, status, error) { 
      cell.data('request-running', false); // mark finished ajax call 
      alert(request.responseText); 
     } 
    }); 

    $(this).parent().html(value); 
}); 

和

$('table.editable td').click(function(event) {  
    if ($('input',this).length == 0 || !$(this).data('request-running')) { //check if there is already an input? Or the old request is still runnig. 
     var content = $(this).html(); 
     id = $(this).parent().find('.id').val(); 
     var class = $(this).attr('class'); 

     $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>'); 

     // $(this).unbind(event); // this shouldn't be needed anymore. 
    } 
}); 

Answer 2

執行此操作的最常見方法是禁用輸入，或者設置一個標誌，防止用戶將注意力集中在/將其轉換爲編輯字段。對於後者，您可以使用jQuery data

Ajax請求的完成/成功回調將再次解除禁用或標誌。

Answer 3

我沒有解除綁定點擊事件，然後結合之後再次AJAX請求完成後，擺脫了以下可能的情況下（也張貼如上評論）的：

用戶點擊編輯，更改數據 555，請求進行但尚未 完成，然後用戶改變 數據333，現在這個請求會 更快（第一次拿到的地方路由 緩慢或有它是 某種原因，包重發），現在用戶將看到 333場，而服務器 上它是555的辯論，因爲在333後555的請求到達 。

這裏的the result（你會看到醜陋的警報辯論，因爲測試是jsfiddle.com，所以它會在Ajax錯誤路線上）。